import type { NoteDetail } from "@/lib/types";

export function NoteEditor({ note }: { note: NoteDetail }) {
  return (
    <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
      <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
        <label htmlFor="note-title" style={{ color: "var(--ml-text-secondary)" }}>
          Title
        </label>
        <input id="note-title" className="input-shell" defaultValue={note.title} />
      </div>

      <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
        <label htmlFor="note-body" style={{ color: "var(--ml-text-secondary)" }}>
          Body
        </label>
        <textarea
          id="note-body"
          className="input-shell"
          defaultValue={note.body}
          style={{ minHeight: 360, resize: "vertical" }}
        />
      </div>
    </section>
  );
}