import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import SubHeader from '../../SubHeader';
import BannerExample from '../examples/BannerExample';
import Carousel from '../Carousel';

import { StarOutline, Reply, LockClosed } from '@useblu/ocean-icons-react';

<Meta
  title="Components/Carousel"
  component={Carousel}
  decorators={[(storyFn) => <div className="show-grid">{storyFn()}</div>]}
  parameters={{ layout: 'padded' }}
/>

# List API

The API documentation of the List React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Carousel } from '@useblu/ocean-react';
```

Any other props supplied will be provided to the [react-slick](https://react-slick.neostack.com/) element (native element).

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Carousel columns={1} infinite={true}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

## autoplay

<Canvas withSource="open" withToolbar>
  <Story name="autoplay">
    <Carousel columns={1} infinite={true} autoplay={true}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

## Component Variable

Those are the columns variations

### 5 Columns

<Canvas withSource="open" withToolbar>
  <Story name="variables-column-5">
    <Carousel columns={5}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

### 4 Columns

<Canvas withSource="open" withToolbar>
  <Story name="variables-column-4">
    <Carousel columns={4}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

### 3 Columns

<Canvas withSource="open" withToolbar>
  <Story name="variables-column-3">
    <Carousel columns={3}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

### 2 Columns

<Canvas withSource="open" withToolbar>
  <Story name="variables-column-2">
    <Carousel columns={2}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

### 1 Column

<Canvas withSource="open" withToolbar>
  <Story name="variables-column-1">
    <Carousel columns={1}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

### Infinite Scrolling

<Canvas withSource="open" withToolbar>
  <Story name="variables-infinite-scroll">
    <Carousel columns={4} infinite={true}>
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
      <BannerExample color={0} />
      <BannerExample color={1} />
      <BannerExample color={2} />
      <BannerExample color={3} />
    </Carousel>
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class       | Description                                                     |
| ------------------ | --------------------------------------------------------------- |
| .ods-carousel      | Styles applied to the root element.                             |
| .ods-carousel-dots | Styles applied to the dots below the children banners container |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Carousel/Carousel.tsx) for more detail.
