/**
 * @deprecated — no Hugo equivalent.
 * Combined Excel-download + filter-trigger button group. No single Hugo component covers this pattern.
 */
import FilterAltIcon from '@material-hu/icons/material/FilterAlt';
import ButtonGroup from '@material-hu/mui/ButtonGroup';
import IconButton from '@material-hu/mui/IconButton';

import excelIcon from 'src/assets/excel.svg';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  onDownloadReport: () => void;
  onFilterReport: () => void;
};

const ReportButton = ({ onDownloadReport, onFilterReport }: Props) => {
  const { t } = useLokaliseTranslation(['backoffice_only']);

  return (
    <ButtonGroup
      disableElevation
      sx={{
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#00883d',
        verticalAlign: 'middle',
      }}
    >
      <IconButton
        onClick={e => {
          e.stopPropagation();
          onDownloadReport();
        }}
        title={t('backoffice_only:report_button.download_report')}
        sx={{
          borderRadius: '12px 0 0 12px',
          py: 0,
          backgroundColor: '#00883d',
          ':hover': { backgroundColor: '#00883d' },
        }}
      >
        <img
          alt="alt"
          src={excelIcon}
          width={24}
          height={24}
        />
      </IconButton>
      <IconButton
        onClick={e => {
          e.stopPropagation();
          onFilterReport();
        }}
        title={t('backoffice_only:report_button.filter_report')}
        sx={{ py: 0 }}
      >
        <FilterAltIcon fontSize="small" />
      </IconButton>
    </ButtonGroup>
  );
};

export default ReportButton;