import PeopleIcon from '@mui/icons-material/People';
import AddIcon from '@mui/icons-material/Add';
import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
// import phoneCall from "./images/phone-call.png";
import CircleIcon from '@mui/icons-material/Circle';
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";

const ShortCuts: React.FC = () => {
    return (
        <div className="short-cuts" >
            <Grid className="row-1" container spacing={2}>
                <Grid item sm={6}>
                    <Button className="tile">
                        <PeopleIcon className="icon" />
                    </Button>
                    <label>New Meeting</label>
                </Grid>
                <Grid item sm={6}>
                    <Button className="tile">
                        <AddIcon className="icon" />
                    </Button>
                    <label>Join</label>
                </Grid>
            </Grid>
            <Grid className="row-2" container spacing={2}>
                <Grid item sm={6}>
                    <Button className="tile">
                        <PhoneEnabledIcon className="icon" />
                    </Button>
                    <label>Call Favourites</label>
                </Grid>
                <Grid item sm={6}>
                    <Button className="tile">
                        <CircleIcon className="icon" />
                    </Button>
                    <label>Recordings</label>
                </Grid>
            </Grid>
        </div>
    );
  };
  
  export default ShortCuts;