import { useTranslation } from 'react-i18next';

import { Stack } from '@mui/material';
import Badge from '@mui/material/Badge';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import { IconFilter } from '@tabler/icons-react';

import { type FiltersButtonProps } from './types';

const FiltersButton = ({
  count,
  onClick,
  onClear,
  slotProps = {},
}: FiltersButtonProps) => {
  const { t } = useTranslation();

  return (
    <Stack
      {...slotProps.root}
      sx={{
        alignItems: 'center',
        flexDirection: 'row',
        gap: 1,
        ...slotProps.root?.sx,
      }}
    >
      <IconButton
        aria-label={t('general:filter')}
        variant="secondary"
        onClick={onClick}
        {...slotProps.button}
      >
        <IconFilter />
        {count > 0 && (
          <Badge
            badgeContent={count}
            {...slotProps.badge}
            color="primary"
            sx={{
              position: 'absolute',
              top: 0,
              right: 0,
              ...slotProps.badge?.sx,
            }}
          />
        )}
      </IconButton>
      {count > 0 && onClear && (
        <Button
          variant="text"
          onClick={onClear}
          {...slotProps.clearButton}
        >
          {t('general:remove_filters')}
        </Button>
      )}
    </Stack>
  );
};

export default FiltersButton;
