import { useTranslation } from "react-i18next";
import "../recipes.scss";

/**
 * Single "faisable maison" pill for an ingredient flagged
 * `IngredientView.reproducible` — renders nothing otherwise, same "mount
 * unconditionally" convention as `AllergenBadges`/`DietBadges`, just for
 * one boolean rather than a list.
 *
 * Two shapes depending on where it's used:
 * - `IngredientPicker`'s card grid: plain, non-interactive pill (no
 *   `searchLabel`).
 * - `IngredientRow` (an ingredient already added to the recipe being
 *   built): pass `searchLabel` (its translated display name) to render it
 *   as a link opening the recipe catalog's own search, pre-filled with
 *   that name, in a new tab — a plain `<a>`, not a router `<Link>`, so the
 *   in-progress recipe form (no draft persistence, see `RecipeFormPage`)
 *   is never at risk of being navigated away from.
 */
export function ReproducibleBadge({
  reproducible,
  searchLabel,
}: {
  reproducible: boolean;
  searchLabel?: string;
}) {
  const { t } = useTranslation();
  if (!reproducible) {
    return null;
  }

  const label = t("recipes.form.reproducibleBadge");

  if (searchLabel) {
    return (
      <a
        className="reproducible-badge reproducible-badge--link"
        href={`/recettes?search=${encodeURIComponent(searchLabel)}`}
        target="_blank"
        rel="noopener noreferrer"
        title={t("recipes.form.reproducibleBadgeHint", { name: searchLabel })}
      >
        {label}
      </a>
    );
  }

  return <span className="reproducible-badge">{label}</span>;
}
