import Check from '@material-hu/icons/material/Check';
import Button, {
  ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

type FilterButtonProps = ButtonProps & {
  isSelected?: boolean;
};

const FilterButton = ({ isSelected, ...other }: FilterButtonProps) => {
  return (
    <Button
      endIcon={isSelected ? <Check /> : null}
      variant="outlined"
      {...other}
      sx={{
        flex: '1 0 0px',
        bgcolor: theme =>
          isSelected
            ? theme.palette.new.action.background.brand.default
            : theme.palette.new.background.secondary.default,
        ...other.sx,
      }}
    />
  );
};

export default FilterButton;
