DateRangePicker

"use client";

import { useState } from "react";
import { type PimoluDateRange, DateRangePicker, Badge } from "@pimolu/react";

const TODAY = new Date(2026, 9, 20);
const stayPresets = [
  {
    label: "This weekend",
    range: {
      from: new Date(2026, 9, 23),
      to: new Date(2026, 9, 25),
    },
  },
  {
    label: "Next week",
    range: {
      from: new Date(2026, 9, 26),
      to: new Date(2026, 10, 1),
    },
  },
];

function dayNumber(date: Date) {
  return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
}

function countDays(range: PimoluDateRange) {
  if(!range.from || !range.to)
    return 0;
  return (Math.round((dayNumber(range.to) - dayNumber(range.from)) /
    86400000) + 1);
}

function formatDate(date: Date | null, locale = "en-US", options: Intl.DateTimeFormatOptions = {
  year: "numeric",
  month: "long",
  day: "numeric",
}) {
  if(!date)
    return "—";
  return new Intl.DateTimeFormat(locale, options).format(date);
}

function BookingExample() {
  const [range, setRange] = useState<PimoluDateRange>({
    from: new Date(2026, 9, 21),
    to: new Date(2026, 9, 25),
  });
  const nights = countDays(range) - 1;
  const complete = Boolean(range.from && range.to);
  return (
    <div className="grid gap-5 min-w-0">
      <DateRangePicker
        label="Stay dates"
        value={range}
        onChange={setRange}
        min={TODAY}
        max={new Date(2027, 9, 20)}
        numberOfMonths={1}
        presets={stayPresets}
        fullWidth
      />
      <div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
        <span className="text-sm text-muted leading-relaxed">Accommodation</span>
        <Badge
          variant={complete && nights > 0 ? "success" : "neutral"}
          appearance="soft"
        >
          {
            complete && nights > 0
              ? `${nights} ${nights === 1 ? "night" : "nights"}`
              : "Choose a stay"
          }
        </Badge>
      </div>
      <p className="text-sm text-muted leading-relaxed">
        {
          complete
            ? `${formatDate(
              range.from,
              "en-US",
              {
                weekday: "short",
                month: "short",
                day: "numeric",
              }
            )} → ${formatDate(
              range.to,
              "en-US",
              {
                weekday: "short",
                month: "short",
                day: "numeric",
              }
            )} · check-in from 3 pm`
            : "Pick an arrival and a departure date."
        }
      </p>
    </div>
  );
}

export function DemoExample() {
  return (<BookingExample />);
}