import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as PaginationStories from './pagination.stories';

<Meta of={PaginationStories} />

<Title />
<Subtitle>Navigate through large datasets with ease.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Placement** — Always place pagination controls directly below the data table or grid they control, preferably within the same card container.
> - **Active State** — Clearly mark the current page with the `isActive` prop.
> - **Interaction Mode** — Use `onClick` for client-side state management and `href` for standard URL-based navigation.