"use client";

import { useTranslations } from "next-intl";

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

const TAG_KEYS: (keyof DietaryTags)[] = ["vegan", "vegetarian", "glutenFree", "dairyFree", "nutFree", "halal", "kosher"];

export function DietaryTagPicker({
  value,
  onChange,
}: {
  value: DietaryTags;
  onChange: (tags: DietaryTags) => void;
}) {
  const t = useTranslations("recipe.dietary");
  return (
    <div className="flex flex-wrap gap-2">
      {TAG_KEYS.map((key) => {
        const label = t(key);
        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>
  );
}
