import { Box, Typography } from "@mui/material";
import React from "react";
import PermContactCalendarIcon from "@mui/icons-material/PermContactCalendar";

const EmptyBody: React.FC = () => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        width: "100%",
        height: "100%",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Box>
        <PermContactCalendarIcon color="secondary" sx={{ fontSize: 100 }} />
      </Box>
      <Box>
        <Typography>
          View contact info by clicking a contact in the left panel
        </Typography>
      </Box>
    </Box>
  );
};

export default EmptyBody;