import type { DietView } from "@batch-cooking/shared";
import { useTranslation } from "react-i18next";
import "./recipes.scss";

/**
 * A row of diet-regime pills — the "associated regime" reminder tagged on a
 * recipe (`RecipeSummaryView.diets`/`RecipeView.diets`, manually chosen by
 * the author, see `RecipeFormPage`). Uses `--color-tag` (turmeric,
 * "category/classification tags" per `_theme.scss`) — never
 * `--color-allergen`, to stay visually distinct from a safety warning.
 * Renders nothing for an empty list, same convention as `AllergenBadges`.
 */
export function DietBadges({ diets }: { diets: DietView[] }) {
  const { t } = useTranslation();
  if (diets.length === 0) {
    return null;
  }
  return (
    <ul className="diet-badges">
      {diets.map((diet) => (
        <li key={diet.id} className="diet-badge">
          {t(`catalog.diets.${diet.key}`)}
        </li>
      ))}
    </ul>
  );
}