import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import SlickSlider from '../SlickSlider';
import { sliderProductsMock } from '../../../../mocks/product/slider';

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

export const renderSlides = item => (
    <div>
        <div style={{ padding: '0 40px' }}>
            <h1>{item.name}</h1>
            <div>{item.description}</div>
        </div>
    </div>
);

# Slick Slider
<br />

## `SlickSliders` are used to display the slick carousel

### Default
<Canvas>
    <Story name="Default">
        <div style={{ textAlign: 'center' }}>
            <SlickSlider>
                {sliderProductsMock.map(renderSlides)}
            </SlickSlider>
        </div>
    </Story>
</Canvas>

### No arrows
<Canvas>
    <Story name="No arrows">
        <div style={{ textAlign: 'center' }}>
            <SlickSlider
                settings={{
                    arrows: false
                }}
            >
                {sliderProductsMock.map(renderSlides)}
            </SlickSlider>
        </div>
    </Story>
</Canvas>

### No dots
<Canvas>
    <Story name="No dots">
        <div style={{ textAlign: 'center' }}>
            <SlickSlider
                settings={{
                    dots: false
                }}
            >
                {sliderProductsMock.map(renderSlides)}
            </SlickSlider>
        </div>
    </Story>
</Canvas>

## Usage Example
View react-slick documentation for the object to pass in the setting's props<br />
https://react-slick.neostack.com/docs/api/

```jsx
import SlickSlider from '@appdirect/sfb-theme-components/src/atoms/slick-slider/SlickSlider';

<SlickSlider settings={sliderSettings}>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</SlickSlider>
```

## Props
<ArgsTable of={SlickSlider} />
