import { Story, Canvas, Meta, ArgsTable } from '@storybook/blocks'
import Slider from '../Slider';
import { sliderMockSettings } from '../../../../mocks/home/slider';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as SliderStories from './Slider.stories';

export const sliderProps = {
    ...sliderMockSettings.settings.productsList,
    buttonLabel: 'See More'
};

export const itemList = sliderMockSettings.settings.productsList.items;

<Meta of={SliderStories} />

# Slider

<br />

## `Sliders` are used to rotate through a list of items while providing numerous customization options.

<br />

### Default

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

### Default

<Canvas>
  <Story of={SliderStories.DifferentImageSizes} />
</Canvas>

### Show more button

<Canvas>
  <Story of={SliderStories.ShowMoreButton} />
</Canvas>

### With settings

<Canvas>
  <Story of={SliderStories.WithSettings} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="sliderProps" code={sliderProps} />

```jsx
import Slider from '@appdirect/sfb-theme-components/src/atoms/slider/Slider'
<Slider {...sliderProps} />
```

## Props

<ArgsTable of={Slider} />
