batchCooking/apps/web/src/features/recipes/badges/AllergenBadges.tsx

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

/**
 * A row of allergen pills — used both on {@link RecipeCard} (catalog list)
 * and the recipe detail page, for a single ingredient's allergens as well
 * as a recipe's aggregated set (`RecipeSummaryView.allergens`/
 * `RecipeView.allergens`, already deduplicated server-side). Renders
 * nothing for an empty list rather than an empty wrapper, so callers can
 * mount it unconditionally.
 */
export function AllergenBadges({ allergens }: { allergens: AllergyView[] }) {
  const { t } = useTranslation();
  if (allergens.length === 0) {
    return null;
  }
  return (
    <ul className="allergen-badges">
      {allergens.map((allergen) => (
        <li key={allergen.id} className="allergen-badge">
          {t(`catalog.allergens.${allergen.key}`)}
        </li>
      ))}
    </ul>
  );
}