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

interface DietSelectProps {
  diets: DietView[];
  value: number | null;
  onChange: (dietId: number | null) => void;
}

/**
 * Dropdown picker for a dietary regime — used both by the signup wizard's
 * regime step and the `/parametres/preferences` settings page. Always
 * includes a "none" option (mapped to `null`, not just an empty label)
 * since this step of the profile journey is skippable — a profile with no
 * regime is a normal, valid state, not an incomplete one.
 *
 * Receives `diets` as a prop rather than fetching them itself: the caller
 * (a page) owns loading state/errors for the reference list, this stays a
 * plain, easy-to-test presentational component.
 */
export function DietSelect({ diets, value, onChange }: DietSelectProps) {
  const { t } = useTranslation();

  return (
    <>
      <label htmlFor="diet">{t("preferences.form.dietLabel")}</label>
      <select
        id="diet"
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))}
      >
        <option value="">{t("preferences.form.dietNone")}</option>
        {diets.map((diet) => (
          <option key={diet.id} value={diet.id}>
            {t(`catalog.diets.${diet.key}`)}
          </option>
        ))}
      </select>
    </>
  );
}
