Date range picker

"use client";

import { DateRangePicker, type DateRangeValue, Label } from "@waveinno/ui";
import * as React from "react";

export default function RangeDemo() {
  const [range, setRange] = React.useState<DateRangeValue>({ from: "2026-09-24", to: "2026-09-30" });
  const [stay, setStay] = React.useState<DateRangeValue>({ from: "", to: "" });
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <div className="space-y-1.5">
        <Label>Report period</Label>
        <DateRangePicker value={range} onChange={setRange} />
        <p className="text-[12px] text-muted">Presets show their dates; nothing changes until Apply.</p>
      </div>
      <div className="space-y-1.5">
        <Label>Reserve a space</Label>
        <DateRangePicker value={stay} onChange={setStay} numberOfMonths={1} presets={[]} applyOnSelect placeholder="Arrival → departure" />
        <p className="text-[12px] text-muted">One month, no presets, applies on the second click.</p>
      </div>
    </div>
  );
}