import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import SlickSlider from '../SlickSlider';
import { sliderProductsMock } from '../../../../mocks/product/slider';
import * as SlickSliderStories from './SlickSlider.stories';

<Meta of={SlickSliderStories} />

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 of={SlickSliderStories.Default} />
</Canvas>

### No arrows

<Canvas>
  <Story of={SlickSliderStories.NoArrows} />
</Canvas>

### No dots

<Canvas>
  <Story of={SlickSliderStories.NoDots} />
</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} />
