"use client";

import type { CodeItem } from "@/lib/types";

export default function ChipPicker({
  items,
  selected,
  onToggle,
  label,
}: {
  items: CodeItem[];
  selected: string[];
  onToggle: (code: string) => void;
  label: string;
}) {
  return (
    <div>
      <label className="label">{label}</label>
      {items.length === 0 ? (
        <p className="text-sm text-gray-400">Keine Einträge vorhanden.</p>
      ) : (
        <div className="flex flex-wrap gap-1.5">
          {items.map((item) => {
            const active = selected.includes(item.code);
            return (
              <button
                key={item.code}
                type="button"
                onClick={() => onToggle(item.code)}
                className={`chip ${active ? "chip-active" : ""}`}
                aria-pressed={active}
                title={item.name}
              >
                <span className="font-semibold">{item.code}</span> {item.name}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}