import {
  Canvas,
  Controls,
  Meta,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as CalendarStories from './Calendar.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={CalendarStories} />

<Title>Calendar</Title>
<Subtitle>
  A date field component that allows users to enter and edit date. Built on top
  of React DayPicker.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/calendar',
    },
    {
      label: 'React DayPicker',
      href: 'https://react-day-picker.js.org/',
    },
  ]}
/>
<LifecycleTag variant="In Development" />

<Canvas of={CalendarStories.Default} sourceState="shown" />
<Controls />

## Import

```tsx
import { Calendar } from '@chainlink/blocks'
```

## Usage

```tsx
import * as React from 'react'
import { Calendar } from '@chainlink/blocks'

export function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border shadow-sm"
    />
  )
}
```

## Examples

### Range Selection

A calendar allowing selection of a date range.

<Canvas of={CalendarStories.Range} sourceState="shown" />

### Multiple Selection

A calendar allowing selection of multiple dates.

<Canvas of={CalendarStories.Multiple} sourceState="shown" />