import { DatePicker } from '@ark-ui/solid/date-picker'
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid'
import { For } from 'solid-js'
import { DayView } from './day-view'

export const Example = () => (
  <DatePicker.Root open startOfWeek={1} selectionMode="range" numOfMonths={2}>
    <DatePicker.Content>
      <DatePicker.Context>
        {(datePicker) => (
          <div>
            <div>
              <DatePicker.YearSelect />
              <DatePicker.MonthSelect />
              <button type="button" onClick={() => datePicker().selectToday()}>
                Today
              </button>
            </div>
            <div>
              <DatePicker.PrevTrigger>
                <ChevronLeftIcon />
              </DatePicker.PrevTrigger>
              <span>{datePicker().visibleRangeText.start}</span>
              <DatePicker.NextTrigger>
                <ChevronRightIcon />
              </DatePicker.NextTrigger>
              <span>{datePicker().visibleRangeText.end}</span>
            </div>
            <div>
              <DayView monthOffset={0} />
              <DayView monthOffset={1} />
            </div>
            <div>
              <DatePicker.Input index={0} />
              <span>-</span>
              <DatePicker.Input index={1} />
              <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
            </div>

            <div>
              <For each={presets}>
                {(preset) => (
                  <DatePicker.PresetTrigger value={preset.value}>
                    {preset.label}
                  </DatePicker.PresetTrigger>
                )}
              </For>
            </div>
          </div>
        )}
      </DatePicker.Context>
    </DatePicker.Content>
  </DatePicker.Root>
)

const presets = [
  { label: 'Last 3 days', value: 'last3Days' },
  { label: 'Last 7 days', value: 'last7Days' },
  { label: 'Last 14 days', value: 'last14Days' },
  { label: 'Last 30 days', value: 'last30Days' },
  { label: 'Last 90 days', value: 'last90Days' },
] as const
Standalone Date Picker

Components in this Example
