Date Picker

"use client"

import {
  DatePicker,
  DatePickerTrigger,
} from "@/components/ui/preskok-ui/date-picker"
import { Label } from "@/components/ui/preskok-ui/field"

export function DatePickerPreskokDemo() {
  return (
    <div className="max-w-xs">
      <DatePicker>
        <Label>Event date</Label>
        <DatePickerTrigger />
      </DatePicker>
    </div>
  )
}

"use client"

import {
  DatePicker,
  DatePickerTrigger,
} from "@/components/ui/preskok-ui/date-picker"
import { Label } from "@/components/ui/preskok-ui/field"

export function DatePickerPreskokDemo() {
  return (
    <div className="max-w-xs">
      <DatePicker>
        <Label>Event date</Label>
        <DatePickerTrigger />
      </DatePicker>
    </div>
  )
}

"use client"

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

import {
  DatePicker,
  DatePickerTrigger,
} from "@/components/ui/preskok-ui/date-picker"
import { Label } from "@/components/ui/preskok-ui/field"

export function DatePickerControlledPreskokDemo() {
  const timeZone = getLocalTimeZone()
  const [date, setDate] = useState<CalendarDate | null>(() =>
    parseDate("2026-04-12")
  )

  const selectedDate = date
    ? date.toDate(timeZone).toLocaleDateString("en-US", {
        day: "numeric",
        month: "short",
        year: "numeric",
      })
    : "No date selected"

  return (
    <div className="max-w-xs space-y-3">
      <DatePicker value={date} onChange={setDate}>
        <Label>Interview date</Label>
        <DatePickerTrigger />
      </DatePicker>
      <p className="text-muted-foreground text-sm">Selected: {selectedDate}</p>
    </div>
  )
}

"use client"

import { parseDate } from "@internationalized/date"

import {
  DatePicker,
  DatePickerTrigger,
} from "@/components/ui/preskok-ui/date-picker"
import { Label } from "@/components/ui/preskok-ui/field"

export function DatePickerDisabledPreskokDemo() {
  return (
    <div className="max-w-xs">
      <DatePicker defaultValue={parseDate("2026-05-20")} isDisabled>
        <Label>Read-only date</Label>
        <DatePickerTrigger />
      </DatePicker>
    </div>
  )
}

"use client"

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

import { Button } from "@/components/ui/preskok-ui/button"
import {
  DatePicker,
  DatePickerTrigger,
} from "@/components/ui/preskok-ui/date-picker"
import { FieldError, Label } from "@/components/ui/preskok-ui/field"
import { Form } from "@/components/ui/preskok-ui/form"

export function DatePickerValidationPreskokDemo() {
  const timeZone = getLocalTimeZone()
  const minMeetingDate = today(timeZone)
  const maxMeetingDate = minMeetingDate.add({ months: 1 })

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

  return (
    <Form onSubmit={(e) => e.preventDefault()} className="max-w-xs space-y-2">
      <DatePicker
        className="mb-2"
        isRequired
        minValue={minMeetingDate}
        maxValue={maxMeetingDate}
        isDateUnavailable={isWeekend}
        validate={(value) => {
          if (!value) {
            return "Please select a meeting date."
          }

          const day = value.toDate(timeZone).getDay()
          if (day === 0 || day === 6) {
            return "Weekends are unavailable."
          }

          return null
        }}
      >
        <Label>Team meeting</Label>
        <DatePickerTrigger />
        <FieldError />
      </DatePicker>
      <Button type="submit">Schedule meeting</Button>
    </Form>
  )
}