import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { LIGHT, DARK } from '../../../constants/themeColor';
import { sortingOptionsMock } from '../../../../mocks/product/productListing';
import Select from '../Select';
import * as SelectStories from './Select.stories';

export const options = sortingOptionsMock.options;

<Meta of={SelectStories} />

# Select

<br />

## `Selects` are wrappers build around the react-select widget.

<br />

### Default

<Canvas>
  <Story of={SelectStories.Default} />
</Canvas>

### Required

<Canvas>
  <Story of={SelectStories.Required} />
</Canvas>

### Inline

<Canvas>
  <Story of={SelectStories.Inline} />
</Canvas>

### Small height

<Canvas>
  <Story of={SelectStories.SmallHeight} />
</Canvas>

### Hidden label

<Canvas>
  <Story of={SelectStories.HiddenLabel} />
</Canvas>

### Color theme

<Canvas>
  <Story of={SelectStories.ColorTheme} />
</Canvas>

### Without background

<Canvas>
  <Story of={SelectStories.WithoutBackground} />
</Canvas>

### Searchable

<Canvas>
  <Story of={SelectStories.Searchable} />
</Canvas>

### Button styles

<Canvas>
  <Story of={SelectStories.ButtonStyles} />
</Canvas>

### With Error

<Canvas>
  <Story of={SelectStories.WithError} />
</Canvas>

### Custom width

<Canvas>
  <Story of={SelectStories.CustomWidth} />
</Canvas>

## Usage Example

```jsx
import Select from '@appdirect/sfb-theme-components/src/atoms/select/Select';

<Select
    label="Sorted By"
    name="select"
    options={
        [
            {
                value: 'RELEVANCE',
                label: 'Relevance',
            },
            {
                value: 'POPULARITY',
                label: 'Popularity',
            }
        ]
    }
/>
```

## Props

<ArgsTable of={Select} />
