@react.component
let make = (
  ~lesson: AnnotationTypes.lesson,
  ~note: option<string>,
  ~onNoteChange: (string, string) => unit,
  ~onClose: unit => unit,
) => {
  let noteValue = switch note {
  | Some(n) => n
  | None => ""
  }

  <div className="flex flex-col h-full">
    <div className="flex items-center justify-between mb-4">
      <div>
        <p className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
          {React.string("Annotation")}
        </p>
        <h2 className="text-lg font-bold mt-0.5">
          {React.string(lesson.title)}
        </h2>
      </div>
      <button
        onClick={_ => onClose()}
        className="text-muted-foreground hover:text-foreground transition-colors text-sm"
      >
        {React.string("✕ Close")}
      </button>
    </div>
    <textarea
      className="flex-1 w-full resize-none rounded-lg border bg-background p-4 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
      placeholder="Write your notes for this lesson..."
      value={noteValue}
      onChange={e => {
        let value = ReactEvent.Form.target(e)["value"]
        onNoteChange(lesson.id, value)
      }}
    />
    <p className="text-xs text-muted-foreground mt-2">
      {React.string("Auto-saved to your browser")}
    </p>
  </div>
}