import type { RecipeInput } from "../types/recipe";

interface Props {
  value: RecipeInput;
  onChange: <K extends keyof RecipeInput>(field: K, value: RecipeInput[K]) => void;
}

const FIELDS: { key: keyof RecipeInput; label: string; placeholder: string }[] = [
  { key: "preptime", label: "Vorbereitung", placeholder: "z.B. 20 min" },
  { key: "cooktime", label: "Kochzeit", placeholder: "z.B. 10 min" },
  { key: "baketime", label: "Backzeit", placeholder: "z.B. 180°C, 20 min" },
  { key: "cooltime", label: "Kühlzeit", placeholder: "z.B. 30 min" },
  { key: "marinade_time", label: "Marinierzeit", placeholder: "z.B. 1-24 h" },
  { key: "robot_time", label: "Küchenmaschine", placeholder: "z.B. 30 min" },
  { key: "servings", label: "Portionen", placeholder: "z.B. 4" },
];

export default function TimingFields({ value, onChange }: Props) {
  return (
    <div className="field-grid">
      {FIELDS.map(({ key, label, placeholder }) => (
        <label key={key}>
          {label}
          <input
            value={(value[key] as string | null | undefined) ?? ""}
            placeholder={placeholder}
            onChange={(e) => onChange(key, e.target.value)}
          />
        </label>
      ))}
    </div>
  );
}
