import { useState } from 'react';
import { DatePicker } from './DatePicker';
import { I18nProvider } from '../../../providers/I18nProvider';

export default {
  title: 'Inputs/DatePicker',
  component: DatePicker,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <I18nProvider>
        <Story />
      </I18nProvider>
    ),
  ],
};

export const Default = {
  render: () => {
    const [value, setValue] = useState('');
    return (
      <DatePicker
        label="Fecha de nacimiento"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    );
  },
};

export const WithError = {
  args: {
    label: 'Fecha',
    error: 'Por favor selecciona una fecha válida',
  },
};

export const Disabled = {
  args: {
    label: 'Fecha deshabilitada',
    value: '2024-01-01',
    disabled: true,
  },
};

export const Required = {
  args: {
    label: 'Fecha requerida',
    required: true,
  },
};

