import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as PaginationStories from './Pagination.stories'
import { LifecycleTag } from '../../docs/components'

<Meta of={PaginationStories} />

<Title>Pagination</Title>
<Subtitle>
  Pagination controls for table-like views with previous/next navigation and a
  center `Page N` control that can be static or selectable when the total count
  is known.
</Subtitle>

<LifecycleTag variant="In Development" />

<Canvas of={PaginationStories.Default} sourceState="shown" />
<Controls />

## Import

```tsx
import { Pagination } from '@chainlink/blocks'
```

## Usage

```tsx
import { useState } from 'react'
import {
  Pagination,
  PaginationControls,
  PaginationDisplay,
} from '@chainlink/blocks'

export function ExamplePagination() {
  const [pageIndex, setPageIndex] = useState(0)

  return (
    <Pagination
      pageIndex={pageIndex}
      pageSize={10}
      totalCount={45}
      onPageChange={setPageIndex}
    />
  )
}
```

## Examples

### Display Mode

With just `pageIndex`, `canNextPage`, and `onPageChange`, pagination can still
render previous/next arrows with a static `Page N` label.

<Canvas of={PaginationStories.DisplayMode} sourceState="shown" />

### Without Total Count

When `totalCount` is unknown, pass `canNextPage` and `currentPageCount` to
control paging and record range display.

<Canvas of={PaginationStories.WithoutTotal} sourceState="shown" />

This maps well to APIs that return the current page plus a `has_more` flag:

```tsx
<Pagination
  pageIndex={pageIndex}
  pageSize={10}
  currentPageCount={rows.length}
  canNextPage={data.has_more}
  onPageChange={setPageIndex}
/>
```

### Display Only

Render just the range text when you already manage pagination controls
elsewhere.

<Canvas of={PaginationStories.DisplayOnly} sourceState="shown" />

### Controls Only

Use `PaginationControls` directly when you only want navigation controls.

<Canvas of={PaginationStories.ControlsOnlyDisplay} sourceState="shown" />

If you still want a center page control without the range text, use
`PaginationControls` on its own:

<Canvas of={PaginationStories.ControlsOnlySelect} sourceState="shown" />

### Comparison

View select, display, and unknown-total pagination together.

<Canvas of={PaginationStories.Comparisons} sourceState="shown" />