import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs/blocks'
import Slider from '../Slider';
import { sliderMockSettings, sliderMockVariousImageSizes } from '../../../../mocks/home/slider';
import { getKnobs } from '../../../tools/knobsHelper';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

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

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

<Meta title="Atoms/Slider" component={Slider} />

# Slider
<br />

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

### Default
<Canvas>
    <Story name="Default">
        <Slider {...sliderMockSettings.settings.productsList} />
    </Story>
</Canvas>

### Default
<Canvas>
    <Story name="Different image sizes">
        <Slider {...sliderMockVariousImageSizes.settings.productsList} />
    </Story>
</Canvas>

### Show more button
<Canvas>
    <Story name="Show more button">
        <Slider {...sliderProps} />
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <Slider items={itemList} settings={getKnobs(Slider.schema().form)} />
    </Story>
</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} />
