Calendar

"use client";

import { useState } from "react";
import type { DateRange } from "react-day-picker";
import { Calendar } from "@dashboardpack/core/components/ui/calendar";
import { Button } from "@dashboardpack/core/components/ui/button";

export default function CalendarExample() {
  const [mode, setMode] = useState<"single" | "multiple" | "range">("single");
  const [single, setSingle] = useState<Date>();
  const [multiple, setMultiple] = useState<Date[]>([]);
  const [range, setRange] = useState<DateRange>();
  const shared = {
    defaultMonth: new Date(2026, 9, 1),
    classNames: { outside: "day-outside text-muted-foreground" },
    labels: {
      labelDayButton: (date: Date) =>
        date.toLocaleDateString("en-US", {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
        }),
    },
    className: "rounded-xl border bg-background",
  };

  return (
    <div className="space-y-3">
      <div
        className="flex gap-1"
        role="group"
        aria-label="Calendar selection mode"
      >
        {(["single", "multiple", "range"] as const).map((value) => (
          <Button
            key={value}
            size="sm"
            variant={mode === value ? "secondary" : "ghost"}
            aria-pressed={mode === value}
            onClick={() => setMode(value)}
            className="capitalize"
          >
            {value}
          </Button>
        ))}
      </div>
      {mode === "single" && (
        <Calendar
          {...shared}
          mode="single"
          selected={single}
          onSelect={setSingle}
        />
      )}
      {mode === "multiple" && (
        <Calendar
          {...shared}
          mode="multiple"
          selected={multiple}
          onSelect={(dates) => setMultiple(dates ?? [])}
        />
      )}
      {mode === "range" && (
        <Calendar
          {...shared}
          mode="range"
          selected={range}
          onSelect={setRange}
        />
      )}
      <p role="status" className="text-center text-xs text-muted-foreground">
        {mode === "single"
          ? (single?.toLocaleDateString() ?? "Choose a date")
          : mode === "multiple"
            ? `${multiple.length} dates selected`
            : range?.from
              ? `${range.from.toLocaleDateString()} – ${range.to?.toLocaleDateString() ?? "Choose an end date"}`
              : "Choose a start and end date"}
      </p>
    </div>
  );
}