import { ButtonGroup, Pagination as ChakraPagination, IconButton } from '@chakra-ui/react';
import { LuChevronLeft, LuChevronRight } from 'react-icons/lu';

export function Pagination({
  total,
  page,
  setPage,
  pageSize = 5
}: {
  total: number;
  page: number;
  setPage: (value: number) => void;
  pageSize?: number;
  setPageSize?: (value: number) => void;
}) {
  return (
    <ChakraPagination.Root
      count={total}
      page={page}
      pageSize={pageSize}
      onPageChange={e => setPage(e.page)}
      defaultPage={1}
    >
      <ButtonGroup variant="ghost" size="sm">
        <ChakraPagination.PrevTrigger asChild>
          <IconButton>
            <LuChevronLeft />
          </IconButton>
        </ChakraPagination.PrevTrigger>

        <ChakraPagination.Items
          render={page => (
            <IconButton variant={{ base: 'ghost', _selected: 'solid' }}>{page.value}</IconButton>
          )}
        />

        <ChakraPagination.NextTrigger asChild>
          <IconButton>
            <LuChevronRight />
          </IconButton>
        </ChakraPagination.NextTrigger>
      </ButtonGroup>
    </ChakraPagination.Root>
  );
}