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;
};

// 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200

const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
  return (
    <Button
      {...props}
      onClick={onClick}
      variant='outline'
      color='none'
      className={cn(
        'rounded-lg max-h-10 font-semibold text-sm gap-1.5',
        'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
        getFilledFormikValuesCount(values) > 0
          ? 'border-primary-gradient text-primary rounded-lg!'
          : 'rounded-lg',
        props.className
      )}
    >
      <Icon
        icon='heroicons:funnel'
        width={20}
        height={20}
        className={
          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
        }
      />
      Filter
      {getFilledFormikValuesCount(values) > 0 && (
        <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
          {getFilledFormikValuesCount(values)}
        </span>
      )}
    </Button>
  );
};

export default ButtonFilter;
