Untitled

import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
import { Flex, IconButton, Select, Text, Tooltip } from '@chakra-ui/react';
import React from 'react'

interface props {
    data: any,
    curPage: number,
    setCurPage: React.Dispatch<React.SetStateAction<any>>,
    goToPrevPage: React.Dispatch<React.SetStateAction<any>>,
    goToNextPage: React.Dispatch<React.SetStateAction<any>>,
    handlePageLimitChange: (e: any) => void,
}

const Pagination = ({ data, curPage, setCurPage, goToPrevPage, goToNextPage, handlePageLimitChange }: props) => {


    const _goToPrevPage = () => {
        if (!data?.hasPrevPage) return;
        goToPrevPage(String(Number(curPage) - 1));
    }

    const _goToNextPage = () => {
        if (!data?.hasNextPage) return;
        goToNextPage(String(Number(curPage) + 1));
    }

    return (
        <Flex gap={4} alignItems="center">
            <Flex>
                <Tooltip placement='top' label="Previous Page">
                    <IconButton
                        size={"sm"}
                        variant={'outline'}
                        onClick={_goToPrevPage}
                        isDisabled={!data?.hasPrevPage}
                        icon={<ChevronLeftIcon />}
                        aria-label={''}
                    />
                </Tooltip>
            </Flex>

            <Flex alignItems="center">
                <Text flexShrink="0">
                    Page{" "}
                    <Text fontWeight="bold" as="span">
                        {curPage || '-'}
                    </Text>{" "}
                    of{" "}
                    <Text fontWeight="bold" as="span">
                        {data?.totalPages || '-'}
                    </Text>
                </Text>
            </Flex>
            <Flex>
                <Tooltip placement='top' label="Next Page">
                    <IconButton
                        size={"sm"}
                        variant={'outline'}
                        onClick={_goToNextPage}
                        isDisabled={!data?.hasNextPage}
                        icon={<ChevronRightIcon />}
                        aria-label={''}
                    />
                </Tooltip>
            </Flex>
            <Select
                size={"sm"}
                w={32}
                isDisabled={!data?.totalDocs}
                value={data?.limit}
                onChange={handlePageLimitChange}
            >
                {[10, 20, 30, 50].map((pageSize) => (
                    <option key={pageSize} value={pageSize}>
                        Show {pageSize}
                    </option>
                ))}
            </Select>
        </Flex>
    )
}

export default Pagination