"use client";

type DietaryTags = {
  vegan?: boolean;
  vegetarian?: boolean;
  glutenFree?: boolean;
  dairyFree?: boolean;
  nutFree?: boolean;
  halal?: boolean;
  kosher?: boolean;
};

const TAG_LABELS: Record<keyof DietaryTags, string> = {
  vegan: "Vegan",
  vegetarian: "Vegetarian",
  glutenFree: "Gluten-free",
  dairyFree: "Dairy-free",
  nutFree: "Nut-free",
  halal: "Halal",
  kosher: "Kosher",
};

export function DietaryTagPicker({
  value,
  onChange,
}: {
  value: DietaryTags;
  onChange: (tags: DietaryTags) => void;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {(Object.entries(TAG_LABELS) as [keyof DietaryTags, string][]).map(([key, label]) => {
        const active = !!value[key];
        return (
          <button
            key={key}
            type="button"
            onClick={() => onChange({ ...value, [key]: !active })}
            className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
              active
                ? "border-primary bg-primary text-primary-foreground"
                : "border-input bg-background hover:bg-muted"
            }`}
          >
            {label}
          </button>
        );
      })}
    </div>
  );
}
