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: "kcal", label: "Kalorien", placeholder: "z.B. 350" },
  { key: "kh", label: "Kohlenhydrate", placeholder: "z.B. 20 g" },
  { key: "protein", label: "Protein", placeholder: "z.B. 15 g" },
  { key: "fett", label: "Fett", placeholder: "z.B. 10 g" },
];

export default function NutritionFields({ 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>
  );
}
