text: import React, { useState } from 'react';
  
  import { makeStyles, useTheme } from '@material-ui/styles';
  
  import { IconButton } from '@material-ui/core';
  import {
    FirstPage,
    LastPage,
    KeyboardArrowLeft,
    KeyboardArrowRight
  } from '@material-ui/icons';
  
  function UsersTablePagination(props) {
    const useStyles1 = makeStyles(theme => ({
      root: {
        flexShrink: 0,
        marginLeft: theme.spacing(2.5)
      }
    }));
  
    const classes = useStyles1();
    const theme = useTheme();
    const { count, page, rowsPerPage, onChangePage } = props;
  
    const handleFirstPageButtonClick = event => {
      onChangePage(event, 0);
    };
  
    const handleBackButtonClick = event => {
      onChangePage(event, page - 1);
    };
  
    const handleNextButtonClick = event => {
      onChangePage(event, page + 1);
    };
  
    const handleLastPageButtonClick = event => {
      onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
    };
  
    return (
      <div className={classes.root}>
        <IconButton
          aria-label="first page"
          disabled={page === 0}
          onClick={handleFirstPageButtonClick}
        >
          {theme.direction === 'rtl' ? <LastPage /> : <FirstPage />}
        </IconButton>
        <IconButton
          aria-label="previous page"
          disabled={page === 0}
          onClick={handleBackButtonClick}
        >
          {theme.direction === 'rtl' ? (
            <KeyboardArrowRight />
          ) : (
            <KeyboardArrowLeft />
          )}
        </IconButton>
        <IconButton
          aria-label="next page"
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          onClick={handleNextButtonClick}
        >
          {theme.direction === 'rtl' ? (
            <KeyboardArrowLeft />
          ) : (
            <KeyboardArrowRight />
          )}
        </IconButton>
        <IconButton
          aria-label="last page"
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          onClick={handleLastPageButtonClick}
        >
          {theme.direction === 'rtl' ? <FirstPage /> : <LastPage />}
        </IconButton>
      </div>
    );
  }
  
  export default UsersTablePagination;
  