Popover

import { Calendar } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { SegmentedControl } from "@/components/ui/segmented-control"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export function QuickSettings() {
  const [open, setOpen] = useState(false);
  const [remind, setRemind] = useState("3");
  const [saved, setSaved] = useState<string | null>(null);
  const dates: Record<string, string> = { "1": "13 Oct", "3": "11 Oct", "7": "7 Oct" };
  return (
    <div className="grid justify-items-center gap-3 pb-40">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button variant="secondary" size="sm"><Calendar aria-hidden="true" />Due 14 Oct · remind {remind === "7" ? "1 week" : `${remind} day${remind === "1" ? "" : "s"}`} before</Button>
        </PopoverTrigger>
        <PopoverContent arrow aria-label="Reminder" className="grid gap-3">
          <p className="text-sm font-medium">Remind Ostra Freight</p>
          <SegmentedControl
            label="Remind before"
            value={remind}
            onValueChange={setRemind}
            options={[{ value: "1", label: "1 day" }, { value: "3", label: "3 days" }, { value: "7", label: "1 week" }]}
          />
          <p className="text-xs text-muted-foreground">Sends the invoice again with a pay link on {dates[remind]}.</p>
          <div className="flex justify-end gap-2">
            <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>Cancel</Button>
            <Button size="sm" onClick={() => { setSaved(dates[remind]); setOpen(false); }}>Save reminder</Button>
          </div>
        </PopoverContent>
      </Popover>
      <p role="status" className="text-sm text-muted-foreground">{saved ? `Reminder set for ${saved}, 09:00 in Ostra Freight’s time zone.` : "No reminder yet."}</p>
    </div>
  );
}