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

interface Props {
  step: Step;
  index: number;
  onChange: (step: Step) => void;
  onRemove: () => void;
  onMoveUp: () => void;
  onMoveDown: () => void;
}

export default function StepRow({ step, index, onChange, onRemove, onMoveUp, onMoveDown }: Props) {
  return (
    <div className="row step-row">
      <div className="row-controls">
        <span className="step-number">{index + 1}</span>
        <button type="button" onClick={onMoveUp} title="Move up">↑</button>
        <button type="button" onClick={onMoveDown} title="Move down">↓</button>
      </div>
      <textarea
        placeholder="Zubereitungsschritt (Tipp: **Label**: Text für eine fette Teil-Überschrift)"
        value={step.text}
        onChange={(e) => onChange({ ...step, text: e.target.value })}
        rows={3}
      />
      <button type="button" className="remove" onClick={onRemove} title="Remove">✕</button>
    </div>
  );
}
