"use client"

import * as React from "react"
import { DayRangePopover } from "@/registry/ui/day-range-popover"

export default function DayRangePopoverDemo() {
  const [applied, setApplied] = React.useState<{
    from: string
    to: string
  } | null>(null)

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="rounded-xl border border-material-border bg-material-regular shadow-xl backdrop-blur-xl backdrop-saturate-[1.7]">
        <DayRangePopover
          initialFrom="2026-06-08"
          initialTo="2026-06-12"
          onApply={(from, to) => setApplied({ from, to })}
        />
      </div>
      <p className="text-xs text-muted-foreground">
        {applied
          ? `Applied: ${applied.from} → ${applied.to}`
          : "Pick a range and apply"}
      </p>
    </div>
  )
}