import { cn } from '@/lib/cn';
import { X } from 'lucide-react';

interface Props {
  isSelected: boolean;
  selectFilter: (filter: string) => void;
  filter: {
    label: string;
    value: string;
  };
}

export const FilterButton = ({ isSelected, selectFilter, filter }: Props) => {
  const handleClick = () => {
    selectFilter(isSelected ? 'all' : filter.value);
  };

  return (
    <button
      type="button"
      aria-pressed={isSelected}
      onClick={handleClick}
      className={cn(
        'flex h-11.25 items-center justify-center gap-3 px-6',
        'text-center text-2xl font-light',
        'transition-colors',
        'focus-visible:outline-none',
        'focus-visible:ring-2',
        isSelected ? 'bg-text-primary border text-white' : 'bg-foreground text-text-primary',
      )}
    >
      <span>{filter.label}</span>

      {isSelected && <X aria-hidden="true" className="h-4 w-4" />}
    </button>
  );
};