import { useState } from 'react';
import { Pagination } from './Pagination';

export default {
  title: 'Layout/Pagination',
  component: Pagination,
  tags: ['autodocs'],
};

export const Default = {
  render: () => {
    const [page, setPage] = useState(1);
    return (
      <Pagination
        currentPage={page}
        totalPages={10}
        onPageChange={setPage}
      />
    );
  },
};

export const WithoutFirstLast = {
  render: () => {
    const [page, setPage] = useState(1);
    return (
      <Pagination
        currentPage={page}
        totalPages={10}
        onPageChange={setPage}
        showFirstLast={false}
      />
    );
  },
};

export const FewPages = {
  render: () => {
    const [page, setPage] = useState(1);
    return (
      <Pagination
        currentPage={page}
        totalPages={3}
        onPageChange={setPage}
      />
    );
  },
};

export const ManyPages = {
  render: () => {
    const [page, setPage] = useState(5);
    return (
      <Pagination
        currentPage={page}
        totalPages={20}
        onPageChange={setPage}
      />
    );
  },
};

