import { useState } from "react";
import type { OrderDetail } from "@orderops/shared";

interface OrderNotesProps {
  order: OrderDetail;
  onSave: (notes: string) => Promise<void>;
}

export function OrderNotes({ order, onSave }: OrderNotesProps) {
  const [notes, setNotes] = useState(order.notes ?? "");

  return (
    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <h3 className="mb-3 text-sm font-semibold text-slate-700">Internal notes</h3>
      <form
        className="space-y-3"
        onSubmit={async (event) => {
          event.preventDefault();
          await onSave(notes);
        }}
      >
        <label className="block text-sm text-slate-700">
          <span className="mb-1 block">Notes</span>
          <textarea
            className="w-full resize-none rounded-lg border border-slate-300 px-3 py-2"
            rows={5}
            value={notes}
            onChange={(event) => setNotes(event.target.value)}
          />
        </label>
        <button className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">
          Save notes
        </button>
      </form>
    </section>
  );
}