pos-dashboard-v2/src/components/TablePaginationComponent.tsx

import { Typography, Pagination } from '@mui/material'

const TablePaginationComponent = ({
  pageIndex,
  pageSize,
  totalCount,
  onPageChange
}: {
  pageIndex: number
  pageSize: number
  totalCount: number
  onPageChange: (event: React.ChangeEvent<unknown>, page: number) => void
}) => {
  const start = pageIndex === 1 ? pageIndex : (pageIndex - 1) * pageSize + 1
  const end = Math.min((pageIndex) * pageSize, totalCount)

  return (
    <div className='flex justify-between items-center flex-wrap pli-6 border-bs bs-auto plb-[12.5px] gap-2'>
      <Typography color='text.disabled'>{`Showing ${start} to ${end} of ${totalCount} entries`}</Typography>
      <Pagination
        shape='rounded'
        color='primary'
        variant='tonal'
        count={Math.ceil(totalCount / pageSize)}
        page={pageIndex}
        onChange={onPageChange}
        showFirstButton
        showLastButton
      />
    </div>
  )
}

export default TablePaginationComponent