type ChipOption<T extends number | string> = {
  id: T;
  label: string;
};

type MultiSelectChipsProps<T extends number | string> = {
  options: ChipOption<T>[];
  selected: T[];
  onToggle: (id: T) => void;
  size?: "sm" | "md";
};

export default function MultiSelectChips<T extends number | string>({
  options,
  selected,
  onToggle,
  size = "sm",
}: MultiSelectChipsProps<T>) {
  const btnSize = size === "sm" ? "btn-sm" : "";
  return (
    <div className="d-flex flex-wrap gap-2">
      {options.map((option) => {
        const active = selected.includes(option.id);
        return (
          <button
            key={String(option.id)}
            type="button"
            className={`btn ${btnSize} ${active ? "btn-primary" : "btn-outline-secondary"}`}
            onClick={() => onToggle(option.id)}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}
