import { Pagination, Typography } from '@mui/material'
import type { Table } from '@tanstack/react-table'
import { useTranslations } from 'next-intl'

const CustomTablePaginationComponent = <TData,>({
  table,
  totalItems
}: {
  table: Table<TData>
  totalItems: number
}) => {
  const t = useTranslations('')
  return (
    <div className='flex justify-between items-center p-4'>
      <Typography>
        {t('KEY.SHOW')} {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}{' '}
        {t('PROPERTY.TO')}{' '}
        {Math.min((table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize, totalItems)}{' '}
        &nbsp;
        {t('KEY.FROM_TOTAL')} {totalItems}
      </Typography>

      <Pagination
        count={Math.ceil(totalItems / table.getState().pagination.pageSize)}
        page={table.getState().pagination.pageIndex + 1}
        onChange={(_, page) => table.setPageIndex(page - 1)}
      />
    </div>
  )
}
export default CustomTablePaginationComponent
