import type { ReactNode } from 'react';
import { Check } from 'lucide-react';
import { cn } from '@/lib/utils';

interface FilterChipProps {
  active?: boolean;
  children?: ReactNode;
  onClick?: () => void;
}

export function FilterChip({ active, children, onClick }: FilterChipProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-pressed={!!active}
      className={cn(
        'inline-flex h-8 items-center gap-1.5 rounded-full border px-3 text-xs font-medium transition-colors',
        active
          ? 'border-primary/50 bg-primary/15 text-primary'
          : 'border-border/70 bg-card/70 text-muted-foreground hover:bg-accent hover:text-foreground',
      )}
    >
      {active && <Check className="h-3 w-3" aria-hidden="true" />}
      {children}
    </button>
  );
}
