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

interface HouseNameFieldProps {
  value: string;
  onChange: (name: string) => void;
  error?: string;
}

/**
 * Labeled text input for the household's name — used both by the signup
 * wizard's household step and the `/parametres/foyer` settings page (see
 * `profile-forms.scss` for the shared styling both consume). Controlled
 * component: the caller owns the value and persists it (`ApiClient.
 * renameHouse`) on submit, not this component.
 */
export function HouseNameField({ value, onChange, error }: HouseNameFieldProps) {
  const { t } = useTranslation();

  return (
    <>
      <label htmlFor="houseName">{t("household.form.nameLabel")}</label>
      <input
        id="houseName"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        autoComplete="off"
      />
      {error && <p className="field-error">{error}</p>}
    </>
  );
}