import {
  Calendar,
  DatePicker,
  DateRangePicker,
  RangeCalendar,
  type CalendarRange,
} from "@/components/ui/date-picker"

const selectedDate = new Date(2050, 6, 18)
const selectedRange: CalendarRange = {
  from: new Date(2050, 6, 15),
  to: new Date(2050, 7, 23),
}

export function DatePickerDemo() {
  return (
    <div className="grid gap-8">
      <div className="flex flex-wrap items-start gap-6">
        <Calendar value={selectedDate} />
        <Calendar view="month-year" value={selectedDate} />
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <DatePicker defaultValue={selectedDate} />
        <DatePicker defaultOpen defaultValue={selectedDate} />
        <div dir="rtl">
          <DatePicker
            dir="rtl"
            placeholder="\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"
          />
        </div>
        <div dir="rtl">
          <DatePicker
            defaultOpen
            defaultValue={selectedDate}
            dir="rtl"
            placeholder="\u0627\u062e\u062a\u0631 \u062a\u0627\u0631\u064a\u062e"
          />
        </div>
      </div>

      <div className="grid gap-6 overflow-x-auto">
        <RangeCalendar value={selectedRange} />
        <RangeCalendar type="double-with-presets" value={selectedRange} />
        <RangeCalendar type="single" value={selectedRange} />
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <DateRangePicker value={selectedRange} />
        <DateRangePicker
          defaultOpen
          type="double-with-presets"
          value={selectedRange}
        />
        <div dir="rtl">
          <DateRangePicker
            dir="rtl"
            placeholder="\u0627\u062e\u062a\u0631 \u0646\u0637\u0627\u0642 \u0627\u0644\u062a\u0627\u0631\u064a\u062e"
            value={selectedRange}
          />
        </div>
        <div dir="rtl">
          <DateRangePicker
            defaultOpen
            dir="rtl"
            placeholder="\u064a\u0648\u0645 / \u0634\u0647\u0631 / \u0633\u0646\u0629"
            type="double-with-presets"
            value={selectedRange}
          />
        </div>
      </div>
    </div>
  )
}
