text: import React from 'react';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import {
    Avatar,
    Box,
    Card,
    CardContent,
    Grid,
    Typography,
    colors,
    makeStyles
  } from '@material-ui/core';
  import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
  import PeopleIcon from '@material-ui/icons/PeopleOutlined';
  
  const useStyles = makeStyles((theme) => ({
    root: {
      height: '100%'
    },
    avatar: {
      backgroundColor: colors.green[600],
      height: 56,
      width: 56
    },
    differenceIcon: {
      color: colors.green[900]
    },
    differenceValue: {
      color: colors.green[900],
      marginRight: theme.spacing(1)
    }
  }));
  
  const TotalPatients = ({ className, value, ...rest }) => {
    const classes = useStyles();
  
    return (
      <Card
        className={clsx(classes.root, className)}
        {...rest}
      >
        <CardContent>
          <Grid
            container
            justify="space-between"
            spacing={3}
          >
            <Grid item>
              <Typography
                color="textSecondary"
                gutterBottom
                variant="h6"
              >
                ผู้ป่วยคงพยาบาล
              </Typography>
              <Typography
                color="textPrimary"
                variant="h3"
              >
                {value}
              </Typography>
            </Grid>
            <Grid item>
              <Avatar className={classes.avatar}>
                <PeopleIcon />
              </Avatar>
            </Grid>
          </Grid>
          <Box
            mt={2}
            display="flex"
            alignItems="center"
          >
            <ArrowUpwardIcon className={classes.differenceIcon} />
            <Typography
              className={classes.differenceValue}
              variant="body2"
            >
              {`${((value * 100) / 30).toFixed(1)}%`}
            </Typography>
            <Typography
              color="textSecondary"
              variant="caption"
            >
              ของเตียงทั้งหมด
            </Typography>
          </Box>
        </CardContent>
      </Card>
    );
  };
  
  TotalPatients.propTypes = {
    className: PropTypes.string,
    value: PropTypes.number
  };
  
  export default TotalPatients;
  