Speisekarte/components/ChipPicker.tsx

"use client";

import type { CodeItem } from "@/lib/types";
import { localized } from "@/lib/types";
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";

export default function ChipPicker({
  items,
  selected,
  onToggle,
  label,
}: {
  items: CodeItem[];
  selected: string[];
  onToggle: (code: string) => void;
  label: string;
}) {
  const dict = useDict();
  const locale = useLocale();

  return (
    <div>
      <label className="label">{label}</label>
      {items.length === 0 ? (
        <p className="text-sm text-gray-400">{dict.codeList.empty}</p>
      ) : (
        <div className="flex flex-wrap gap-1.5">
          {items.map((item) => {
            const active = selected.includes(item.code);
            const name = localized(item, locale);
            return (
              <button
                key={item.code}
                type="button"
                onClick={() => onToggle(item.code)}
                className={`chip ${active ? "chip-active" : ""}`}
                aria-pressed={active}
                title={name}
              >
                <span className="font-semibold">{item.code}</span> {name}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}