import PeopleIcon from "@mui/icons-material/People";
// import AddIcon from "@mui/icons-material/Add";
import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
// import CircleIcon from "@mui/icons-material/Circle";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import CallFavouritesDialog from "./CallFavouritesDialog";
import { useState } from "react";

const ShortCuts: React.FC = () => {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div className="short-cuts">
      <Grid className="row-1" container spacing={1}>
        <Grid item sm={6}>
          <Button className="tile">
            <PeopleIcon className="icon" />
          </Button>
          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
            Schedule Meeting
          </Typography>
        </Grid>
        <Grid item sm={6}>
          <Button className="tile" onClick={handleClickOpen}>
            <PhoneEnabledIcon className="icon" />
          </Button>
          <CallFavouritesDialog
            open={open}
            handleClose={handleClose}
          />
          <Typography variant="h6" className="mylabel" sx={{ ml: 1 }}>
            Call Group
          </Typography>
        </Grid>
      </Grid>
      {/* <Grid className="row-2" container spacing={1}>
        <Grid item sm={6}>
          <Button className="tile">
            <AddIcon className="icon" />
          </Button>
          <Typography className="mylabel" sx={{ ml: 1 }}>
            Join
          </Typography>
        </Grid>
        <Grid item sm={6}>
          <Button className="tile">
            <CircleIcon className="icon" />
          </Button>
          <Typography className="mylabel" sx={{ ml: 1 }}>
            Recordings
          </Typography>
        </Grid>
      </Grid> */}
    </div>
  );
};

export default ShortCuts;