import type { Meta, StoryObj } from '@storybook/react';
import SelectComponent, { SelectItem } from './';

const meta: Meta<typeof SelectComponent> = {
  title: 'Base/Select',
  component: SelectComponent,
  tags: ['autodocs']
};

export default meta;

type Story = StoryObj<typeof meta>;

const items = [
  {
    label: 'Option 1',
    value: 'option1'
  },
  {
    label: 'Option 2',
    value: 'option2'
  }
];
export const Select: Story = {
  render: () => (
    <div>
      <SelectComponent items={items} label="Select">
        {items.map((item) => (
          <SelectItem key={item.value} textValue={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectComponent>
      <SelectComponent items={items} label="Select with error" isInvalid>
        {items.map((item) => (
          <SelectItem key={item.value} textValue={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectComponent>
    </div>
  )
};
