import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Paging from '../Paging';
import { paginationMock } from '../../../../mocks/product/productListing';

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

# Paging
<br />

## Pagings help users to navigate the pages of a search result.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Paging data={paginationMock} />
    </Story>
</Canvas>

### Small
<Canvas>
    <Story name="Small">
        <Paging data={paginationMock} size="small" />
    </Story>
</Canvas>

## Usage Example
```jsx
import Paging from '@appdirect/sfb-theme-components/src/atoms/paging/Paging';

<Paging data={{
    nbPages: 3,
    currentPage: 1,
    simplePagesList: '1 of 3',
    pagesList: [
        {
            type: 'previous',
            status: 'disabled'
        },
        {
            type: 'page',
            nb: 1,
            status: 'selected',
            url: '/en-US/listing?page=1'
        },
        {
            type: 'page',
            nb: 2,
            status: 'enabled',
            url: '/en-US/listing?page=2'
        },
        {
            type: 'page',
            nb: 3,
            status: 'enabled',
            url: '/en-US/listing?page=3'
        },
        {
            type: 'next',
            status: 'enabled',
            url: '/en-US/listing?page=2'
        }
    ],
    itemsPerPage: 12,
    totalCount: 30,
    start: 0
}}/>
```

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