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

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
  { value: 'option4', label: 'Option 4' },
];

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

export const Default = {
  render: () => {
    const [value, setValue] = useState('');
    return (
      <Select
        label="Select an option"
        options={options}
        value={value}
        placeholder="Choose..."
        onChange={(e) => setValue(e.target.value)}
      />
    );
  },
};

export const WithError = {
  args: {
    label: 'Select',
    options: options,
    placeholder: 'Choose an option',
    error: 'Please select an option',
  },
};

export const Disabled = {
  args: {
    label: 'Disabled Select',
    options: options,
    value: 'option1',
    disabled: true,
  },
};

export const Required = {
  args: {
    label: 'Required Select',
    options: options,
    placeholder: 'Choose an option',
    required: true,
  },
};

