import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as SimpleSelectStories from './SimpleSelect.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta title="Form/Select/SimpleSelect" of={SimpleSelectStories} />

<Title>SimpleSelect</Title>
<Subtitle>
  Opinionated select built on the Select primitive. Pass an `options` array and
  get a fully composed select with no manual subcomponent setup.
</Subtitle>
<LifecycleTag variant="Stable" />
**Component type:** Abstraction over Select

<Canvas of={SimpleSelectStories.Default} layout="padded" sourceState="shown" />
<Controls of={SimpleSelectStories.Default} />

## When to use

Use `SimpleSelect` for standard select inputs where the default Blocks structure is sufficient. Choose `SimpleSelect` when you can pass an `options` array. Use `Select` when you need a custom trigger, grouped items, or icon items. Use `Combobox` when the user needs to search the list.

## Import

```tsx
import { SimpleSelect } from '@chainlink/blocks'
```

## Anatomy

```tsx
<SimpleSelect
  placeholder="Select a network"
  options={[
    { label: 'Ethereum', value: 'ethereum' },
    { label: 'Arbitrum', value: 'arbitrum' },
    { label: 'Base', value: 'base' },
  ]}
/>
```

## Examples

### Controlled

<Canvas
  of={SimpleSelectStories.Controlled}
  layout="padded"
  sourceState="shown"
/>

### Uncontrolled with pre-selected value

<Canvas
  of={SimpleSelectStories.PreSelected}
  layout="padded"
  sourceState="shown"
/>

### Disabled

<Canvas of={SimpleSelectStories.Disabled} layout="padded" sourceState="shown" />

### Small size

<Canvas of={SimpleSelectStories.Small} layout="padded" sourceState="shown" />

### Extra small size

<Canvas of={SimpleSelectStories.Xs} layout="padded" sourceState="shown" />

## Related components

- `Select` for custom trigger or content composition
- `Combobox` for searchable selection
- `DropdownMenu` for action menus instead of value selection