import type { Meta, StoryObj } from '@storybook/react-vite';
import { Select } from '../../src/ui/Select/Select';

const ENVIRONMENTS = [
  { value: 'dev', label: 'Development' },
  { value: 'staging', label: 'Staging' },
  { value: 'prod', label: 'Production' },
];

const SCENARIO_TYPES = [
  { value: 'smoke', label: 'Smoke test' },
  { value: 'regression', label: 'Regression' },
  { value: 'e2e', label: 'End-to-end' },
  { value: 'perf', label: 'Performance', disabled: true },
];

const meta: Meta<typeof Select> = {
  title: 'UI/Select',
  component: Select,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div style={{ width: 320 }}>
        <Story />
      </div>
    ),
  ],
};
export default meta;
type Story = StoryObj<typeof Select>;

export const Default: Story = {
  args: {
    label: 'Environment',
    options: ENVIRONMENTS,
    placeholder: 'Select an environment…',
  },
};

export const WithValue: Story = {
  args: {
    label: 'Environment',
    options: ENVIRONMENTS,
    defaultValue: 'staging',
  },
};

export const WithHint: Story = {
  args: {
    label: 'Test type',
    options: SCENARIO_TYPES,
    placeholder: 'Choose a type…',
    hint: 'Performance tests require a dedicated runner.',
  },
};

export const WithError: Story = {
  args: {
    label: 'Environment',
    options: ENVIRONMENTS,
    defaultValue: '',
    placeholder: 'Select an environment…',
    error: 'Please select an environment.',
  },
};

export const Disabled: Story = {
  args: {
    label: 'Environment',
    options: ENVIRONMENTS,
    defaultValue: 'prod',
    disabled: true,
  },
};