Range Calendar

"use client"

import { RangeCalendar } from "@/components/ui/preskok-ui/range-calendar"

export function RangeCalendarPreskokDemo() {
  return <RangeCalendar aria-label="Trip dates" />
}

"use client"

import { RangeCalendar } from "@/components/ui/preskok-ui/range-calendar"

export function RangeCalendarPreskokDemo() {
  return <RangeCalendar aria-label="Trip dates" />
}

"use client"

import { useState } from "react"
import type { CalendarDate } from "@internationalized/date"
import { getLocalTimeZone, parseDate } from "@internationalized/date"
import type { RangeValue } from "react-aria-components"

import { RangeCalendar } from "@/components/ui/preskok-ui/range-calendar"

export function RangeCalendarControlledPreskokDemo() {
  const timeZone = getLocalTimeZone()
  const [range, setRange] = useState<RangeValue<CalendarDate> | null>(() => ({
    start: parseDate("2026-04-10"),
    end: parseDate("2026-04-16"),
  }))

  const selectedRange =
    range?.start && range?.end
      ? `${range.start.toDate(timeZone).toLocaleDateString("en-US", {
          day: "numeric",
          month: "short",
        })} - ${range.end.toDate(timeZone).toLocaleDateString("en-US", {
          day: "numeric",
          month: "short",
        })}`
      : "No range selected"

  return (
    <div className="space-y-3">
      <RangeCalendar
        value={range}
        onChange={setRange}
        aria-label="Controlled trip dates"
      />
      <p className="text-muted-foreground text-sm">Selected: {selectedRange}</p>
    </div>
  )
}

"use client"

import { parseDate } from "@internationalized/date"

import { RangeCalendar } from "@/components/ui/preskok-ui/range-calendar"

export function RangeCalendarDisabledPreskokDemo() {
  return (
    <RangeCalendar
      defaultValue={{
        start: parseDate("2026-05-03"),
        end: parseDate("2026-05-08"),
      }}
      isDisabled
      aria-label="Disabled trip dates"
    />
  )
}

"use client"

import { useState } from "react"
import type { CalendarDate } from "@internationalized/date"
import { getLocalTimeZone, today } from "@internationalized/date"
import type { DateValue, RangeValue } from "react-aria-components"

import { RangeCalendar } from "@/components/ui/preskok-ui/range-calendar"

export function RangeCalendarValidationPreskokDemo() {
  const timeZone = getLocalTimeZone()
  const [range, setRange] = useState<RangeValue<CalendarDate> | null>(() => ({
    start: today(timeZone).add({ days: 2 }),
    end: today(timeZone).add({ days: 5 }),
  }))
  const minTripDate = today(timeZone)
  const maxTripDate = minTripDate.add({ months: 2 })

  const isWeekend = (value: DateValue) => {
    const day = value.toDate(timeZone).getDay()
    return day === 0 || day === 6
  }

  return (
    <div className="space-y-3">
      <RangeCalendar
        value={range}
        onChange={setRange}
        minValue={minTripDate}
        maxValue={maxTripDate}
        isDateUnavailable={isWeekend}
        aria-label="Validated trip dates"
      />
      <p className="text-muted-foreground text-sm">
        Range must stay within 2 months and excludes weekends.
      </p>
    </div>
  )
}