Calendar

"use client"

import * as React from "react"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

// A date picker: a pop-up button that opens the calendar in a popover.
export default function CalendarDatePicker() {
  const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 9, 27))
  const [open, setOpen] = React.useState(false)
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger render={<Button variant="secondary" className="w-48 justify-between" />}>
        {date ? date.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" }) : "Choose a date"}
        <CalendarIcon className="text-mac-label-secondary" />
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={date}
          defaultMonth={date}
          onSelect={(next) => {
            setDate(next)
            setOpen(false)
          }}
          className="bg-transparent"
        />
      </PopoverContent>
    </Popover>
  )
}

"use client"

import * as React from "react"
import type { DateRange } from "react-day-picker"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>({ from: new Date(2026, 9, 20), to: new Date(2026, 9, 24) })
  return (
    <Calendar
      mode="range"
      numberOfMonths={2}
      selected={range}
      onSelect={setRange}
      defaultMonth={new Date(2026, 9, 1)}
      className="rounded-[14px] shadow-[0_0_0_1px_var(--mac-grid)]"
    />
  )
}