import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Paging from '../Paging';
import { paginationMock, paginationShortMock } from '../../../../mocks/listingProducts/pagination';
import * as PagingStories from './Paging.stories';

<Meta of={PagingStories} />

# Paging

<br />

## Pagings help users to navigate the pages of a search result.

<br />

### Default

<Canvas>
  <Story of={PagingStories.Default} />
</Canvas>

### 3 pages

<Canvas>
  <Story of={PagingStories.$3Pages} />
</Canvas>

### Sizes

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