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

<Meta of={MultiSelectStories} />

<Title>MultiSelect</Title>
<Subtitle>
  A multi-select component that allows users to select multiple options from a
  list. It supports searching, grouping, and custom styling.
</Subtitle>

<SourceLinks
  links={[
    {
      label: 'MultiSelect',
      href: 'https://shadcn-multi-select-component.vercel.app/',
    },
  ]}
/>

<LifecycleTag variant="In Development" />

<Canvas of={MultiSelectStories.Default} sourceState="shown" />
<Controls />

## Import

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

## Usage

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

const options = [
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' },
  { label: 'Angular', value: 'angular' },
]

export const MyComponent = () => {
  return (
    <MultiSelect
      options={options}
      placeholder="Select frameworks"
      onValueChange={(values) => console.log(values)}
    />
  )
}
```

## Examples

### WithImages

Demonstrates using icons or images within the options.

<Canvas of={MultiSelectStories.WithImages} sourceState="shown" />

### Grouped

Demonstrates grouping options under headings.

<Canvas of={MultiSelectStories.Grouped} sourceState="shown" />

### Disabled

Demonstrates the disabled state of the component.

<Canvas of={MultiSelectStories.Disabled} sourceState="shown" />

### EmptyIndicator

Demonstrates a custom empty state when no search results are found.

<Canvas of={MultiSelectStories.EmptyIndicator} sourceState="shown" />

### Responsive

Demonstrates responsive behavior where the component adapts to mobile screens. This includes reducing the maximum count of visible items (`maxCount`) and using more compact badges with smaller text and padding to fit better on smaller viewports.

<Canvas of={MultiSelectStories.Responsive} sourceState="shown" />

### Sizes

Demonstrates different size variants: default, sm, and xs.

<Canvas of={MultiSelectStories.Sizes} sourceState="shown" />

### WidthConstraints

Demonstrates how to control the width of the component using `minWidth` and `maxWidth` props.

<Canvas of={MultiSelectStories.WidthConstraints} sourceState="shown" />