import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
import { getSource } from "../../utils/storybook.ts";

import * as stories from "./stories.ts";
import defaultConfig from "../config.ts?raw"

<Meta of={stories} />
<Title of={stories} />
<Subtitle of={stories} />
<Description of={stories} />
<Primary of={stories}  />
<Controls of={stories.Default} />
<Stories of={stories} />

## Option meta keys
Keys you may/have to provide to the component in an option object.

<Markdown>
{`
|  Key name         | Description                                     | Type                    |
| ------------------| ----------------------------------------------- | ------------------------|
| value             | Option value                                    | String, Number, Boolean |
| label             | Option label                                    | String                  |
| disabled          | Indicates if option is disabled                 | Boolean                 |
| icon              | Icon name which appears instead of option label.| String                  |
| leftIcon          | Option left icon name                           | String                  |
| rightIcon         | Option right icon name                          | String                  |
| onClick           | Option event handler                            | Function                |        
`}
</Markdown>

## Default config
<Source code={getSource(defaultConfig)} language="jsx" dark />