import { TablePagination as MuiTablePagination } from '@mui/material'
import type { PaginationProps } from '../types'
import { PaginationActions } from './pagination-actions'

/**
 * Table pagination component
 */
export function Pagination({
  page,
  rowsPerPage,
  total,
  rowsPerPageOptions = [5, 10, 25, 50],
  onPageChange,
  onRowsPerPageChange,
}: PaginationProps) {
  const handlePageChange = (
    _event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number,
  ) => {
    onPageChange(newPage)
  }

  const handleRowsPerPageChange = (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    onRowsPerPageChange(parseInt(event.target.value, 10))
  }

  return (
    <MuiTablePagination
      component='div'
      count={total}
      page={page}
      rowsPerPage={rowsPerPage}
      rowsPerPageOptions={rowsPerPageOptions}
      onPageChange={handlePageChange}
      onRowsPerPageChange={handleRowsPerPageChange}
      ActionsComponent={PaginationActions}
    />
  )
}