import { FC } from 'react';

import { IconFilter } from '@material-hu/icons/tabler';
import Badge from '@material-hu/mui/Badge';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  showDrawer: () => void;
  count?: number;
};

export const FiltersegmentationButton: FC<Props> = ({ showDrawer, count }) => {
  const { t } = useLokaliseTranslation(['events', 'general']);

  return (
    <Button
      variant="secondary"
      onClick={() => showDrawer()}
      startIcon={<IconFilter />}
      size="medium"
      sx={{
        ...(count &&
          count > 0 && {
            justifyContent: 'space-between',
            pr: 5,
          }),
      }}
      endIcon={
        !!count &&
        count > 0 && (
          <Badge
            color="primary"
            badgeContent={count}
            sx={{ pl: 2 }}
          />
        )
      }
    >
      {t('general:filter_by')}
    </Button>
  );
};
