Popover with form

// Built on Radix (npm i @radix-ui/react-popover): focus moves in, Escape and
// outside clicks close it, and focus returns to the trigger.
import * as Popover from "@radix-ui/react-popover";
import { Clock } from "lucide-react";

const field = "h-9 w-full rounded border border-border-strong bg-bg px-3 text-sm text-fg outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20";

export function ReminderPopover({ onSchedule }: { onSchedule: (data: FormData) => void }) {
  return (
    <Popover.Root>
      <Popover.Trigger className="inline-flex h-8 items-center gap-1.5 rounded border border-border-strong bg-bg px-2.5 text-[13px] font-medium text-fg hover:bg-surface data-[state=open]:bg-surface-2">
        <Clock className="size-3.5" aria-hidden />Set reminder
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content align="start" sideOffset={8} aria-label="Payment reminder"
          className="w-[300px] rounded-lg border border-border bg-bg p-4 text-fg shadow-lg">
          <p className="font-medium">Payment reminder</p>
          <p className="mb-3.5 text-[12.5px] text-fg-subtle">For INV-1042 · ₹48,500 due 22 Oct</p>
          <form
            className="grid gap-3"
            onSubmit={(e) => { e.preventDefault(); onSchedule(new FormData(e.currentTarget)); }}
          >
            <label className="grid gap-1.5">
              <span className="text-[13px] font-medium">Send on</span>
              <input name="date" type="date" required className={field} />
            </label>
            <label className="grid gap-1.5">
              <span className="text-[13px] font-medium">Channel</span>
              <select name="channel" defaultValue="whatsapp" className={field}>
                <option value="email">Email</option>
                <option value="whatsapp">WhatsApp</option>
                <option value="sms">SMS</option>
              </select>
            </label>
            <label className="inline-flex items-center gap-2 text-[13.5px]">
              <input name="attach" type="checkbox" defaultChecked className="size-4 accent-primary" />
              Attach invoice PDF
            </label>
            <div className="mt-1 flex justify-end gap-2">
              <Popover.Close className="h-8 rounded px-2.5 text-[13px] font-medium text-fg hover:bg-surface-2">Cancel</Popover.Close>
              <button type="submit" className="h-8 rounded bg-primary px-2.5 text-[13px] font-medium text-primary-fg hover:bg-primary-hover">
                Schedule
              </button>
            </div>
          </form>
          <Popover.Arrow className="fill-bg" width={12} height={6} />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}