import { Chip } from "@/components/ui/Chip";
import { cn } from "@/lib/utils";

/**
 * Filtres en chips — pas en dropdown. Cf. wireframe 2.4 :
 * "Arthur veut 'à relancer' en 1 clic".
 */
export type FilterOption<TKey extends string = string> = {
  key: TKey;
  label: string;
  /** Compteur affiché entre parenthèses. */
  count?: number;
};

type FilterChipsProps<TKey extends string> = {
  options: ReadonlyArray<FilterOption<TKey>>;
  value: TKey;
  onChange: (key: TKey) => void;
  className?: string;
};

export function FilterChips<TKey extends string>({
  options,
  value,
  onChange,
  className,
}: FilterChipsProps<TKey>) {
  return (
    <div
      role="tablist"
      aria-label="Filtrer les factures par statut"
      className={cn("flex flex-wrap gap-2", className)}
    >
      {options.map((opt) => (
        <Chip
          key={opt.key}
          role="tab"
          aria-selected={value === opt.key}
          selected={value === opt.key}
          withCheck={false}
          onClick={() => onChange(opt.key)}
        >
          {opt.label}
          {opt.count !== undefined && (
            <span
              className={cn(
                "ml-1 tabular-nums text-[11.5px] font-medium",
                value === opt.key ? "text-rubis-deep/80" : "text-ink-3",
              )}
            >
              {opt.count}
            </span>
          )}
        </Chip>
      ))}
    </div>
  );
}
