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

interface Props {
  ingredient: Ingredient;
  onChange: (ingredient: Ingredient) => void;
  onRemove: () => void;
  onMoveUp: () => void;
  onMoveDown: () => void;
}

export default function IngredientRow({ ingredient, onChange, onRemove, onMoveUp, onMoveDown }: Props) {
  const isHeader = ingredient.kind === "section_header";

  return (
    <div className="row ingredient-row">
      <div className="row-controls">
        <button type="button" onClick={onMoveUp} title="Move up">↑</button>
        <button type="button" onClick={onMoveDown} title="Move down">↓</button>
      </div>

      <label className="checkbox-inline">
        <input
          type="checkbox"
          checked={isHeader}
          onChange={(e) =>
            onChange({ ...ingredient, kind: e.target.checked ? "section_header" : "item" })
          }
        />
        Section header
      </label>

      {!isHeader && (
        <>
          <input
            className="qty"
            placeholder="Menge"
            value={ingredient.quantity ?? ""}
            onChange={(e) => onChange({ ...ingredient, quantity: e.target.value })}
          />
          <input
            className="unit"
            placeholder="Einheit"
            value={ingredient.unit ?? ""}
            onChange={(e) => onChange({ ...ingredient, unit: e.target.value })}
          />
        </>
      )}

      <input
        className="text"
        placeholder={isHeader ? "Abschnittsname (z.B. Vorteig)" : "Zutat"}
        value={ingredient.text}
        onChange={(e) => onChange({ ...ingredient, text: e.target.value })}
      />

      <button type="button" className="remove" onClick={onRemove} title="Remove">✕</button>
    </div>
  );
}
