import React from 'react'
import { DatePicker } from '../components'
import type { Meta } from '@storybook/react'

const meta = {
  title: 'Form/DatePicker',
  component: DatePicker,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof DatePicker>

export default meta

export const BasicDatePicker = () => <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />
BasicDatePicker.storyName = 'DatePicker Basic'

export const DatePickerVariants = () => (
  <>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Responsive" variant="responsive" />
    </div>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Mobile" variant="mobile" />
    </div>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Desktop" variant="desktop" />
    </div>
  </>
)

DatePickerVariants.storyName = 'DatePicker Variants'

export const DatePickerLanguage = () => (
  <>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Brazil" language="pt-br" />
    </div>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <DatePicker
        sx={{ minWidth: 275 }}
        label="DatePicker English"
        language="en"
        format="YYYY-MM-DD"
      />
    </div>
    <div style={{ width: '480px', marginBottom: 30 }}>
      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Spain" language="es" />
    </div>
  </>
)

DatePickerLanguage.storyName = 'DatePicker Languages'