text: import React, { useState } from 'react'
  import clsx from 'clsx'
  import PerfectScrollbar from 'react-perfect-scrollbar'
  import { makeStyles } from '@material-ui/styles'
  
  import {
    Card,
    CardActions,
    CardContent,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    TablePagination,
  } from '@material-ui/core'
  import { clinicHistory } from './ClinicHistoryData'
  
  const useStyles = makeStyles((theme) => ({
    root: {
      padding: 0,
    },
    content: {
      padding: 0,
    },
    inner: {
      minWidth: 'inherit',
    },
    nameContainer: {
      display: 'flex',
      alignItems: 'baseline',
    },
    status: {
      marginRight: 15,
    },
    actions: {
      justifyContent: 'flex-end',
    },
    cell: {
      color: '#4e4f50',
      fontSize: '16px',
    },
    search_items: {
      maxHeight: '50px',
      margin: '10px',
      backgroundColor: '#fff',
    },
    grid: {
      borderBottom: '2px solid #3f51b5',
      padding: '5px',
    },
  }))
  
  const NurseClinicHistoryTable = (props) => {
    const { className } = props
    const [rowsPerPage, setRowsPerPage] = useState(9) // set no.of rows per page
    const [page, setPage] = useState(0) // set page no
  
    const tableHeaders = [
      // add table header names
      { text: 'Date' },
      { text: 'Start Time' },
      { text: 'End Time' },
      { text: 'No.of Patients' },
      { text: 'Doctor Assigned' },
    ]
  
    const classes = useStyles()
  
    const handlePageChange = (event, page) => {
      setPage(page)
    }
    const handleRowsPerPageChange = (event) => {
      setRowsPerPage(event.target.value)
    }
  
    return (
      <div>
        <Card padding={'0'} className={clsx(classes.root, className)}>
          <CardContent className={classes.content}>
            <PerfectScrollbar>
              <div className={classes.inner}>
                <Table>
                  <TableHead
                    style={{ backgroundColor: '#ebf5f7' }}
                    className={classes.head}
                  >
                    <TableRow>
                      {tableHeaders.map((col) => (
                        <TableCell
                          style={{
                            color: '#3f51b5',
                            fontWeight: 'bold',
                            fontSize: '16px',
                            borderBottom: '1px solid #000',
                          }}
                          className={classes.hoverable}
                        >
                          <span>{col.text}</span>
                        </TableCell>
                      ))}
                      <TableCell
                        style={{ borderBottom: '1px solid #000' }}
                      ></TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {clinicHistory
                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) // slice patienData array to no.of rows per page
                      .map(
                        (
                          row // add table row of patientData
                        ) => (
                          <TableRow className={classes.tableRow} hover>
                            <TableCell className={classes.cell}>
                              {row.date}
                            </TableCell>
                            <TableCell className={classes.cell}>
                              {row.start}
                            </TableCell>
                            <TableCell className={classes.cell}>
                              {row.end}
                            </TableCell>
                            <TableCell className={classes.cell}>
                              {row.patients}
                            </TableCell>
                            <TableCell className={classes.cell}>
                              {row.nurse}
                            </TableCell>
                          </TableRow>
                        )
                      )}
                  </TableBody>
                </Table>
              </div>
            </PerfectScrollbar>
          </CardContent>
          <CardActions className={classes.actions}>
            <TablePagination
              component='div'
              count={clinicHistory.length} // size of patientData array
              onChangePage={handlePageChange}
              onChangeRowsPerPage={handleRowsPerPageChange}
              page={page}
              rowsPerPage={rowsPerPage}
              rowsPerPageOptions={[5, 9, 15]}
            />
          </CardActions>
        </Card>
      </div>
    )
  }
  
  export default NurseClinicHistoryTable