import Button, { ButtonProps } from '@/components/Button';
import { getFilledFormikValuesCount } from '@/lib/formik-helper';
import { cn } from '@/lib/helper';
import { Icon } from '@iconify/react';
import { FormikValues } from 'formik';

export type ButtonFilterProps = ButtonProps & {
  values: FormikValues;
  onClick: () => void;
};

const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
  return (
    <Button
      {...props}
      onClick={onClick}
      className={cn(
        getFilledFormikValuesCount(values) > 0
          ? 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
          : '',
        props.className
      )}
    >
      <Icon
        icon='heroicons:funnel'
        width={20}
        height={20}
        className={
          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
        }
      />
      Filter
      {getFilledFormikValuesCount(values) > 0 && (
        <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
          {getFilledFormikValuesCount(values)}
        </span>
      )}
    </Button>
  );
};

export default ButtonFilter;
