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 `/foyer` 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("household.form.dietLabel")}</label>
      <select
        id="diet"
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))}
      >
        <option value="">{t("household.form.dietNone")}</option>
        {diets.map((diet) => (
          <option key={diet.id} value={diet.id}>
            {diet.name}
          </option>
        ))}
      </select>
    </>
  );
}