import { Box, Button, IconButton, Typography } from "@mui/material";
import React from "react";
import PhoneIcon from "@mui/icons-material/Phone";
import VideocamIcon from "@mui/icons-material/Videocam";
import GroupsIcon from "@mui/icons-material/Groups";
import ContactInfo from "../../ContactInfo";

interface Props {
  contactInfo: ContactInfo;
}

const UpperBody: React.FC<Props> = (props) => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        border: 1,
        borderRadius: 2,
        width: "70%",
        alignSelf: "center",
        mb: 2,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-evenly",
          alignItems: "center",
        }}
      >
        <Typography variant="h3">{props.contactInfo.name}</Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          my: 2,
        }}
      >
        <Box
          sx={{
            ml: "5%",
          }}
        >
          <IconButton sx={{ border: 1, mr: 1 }} size="large">
            <PhoneIcon fontSize="large" />
          </IconButton>
          <IconButton sx={{ border: 1, mr: 1 }} size="large">
            <VideocamIcon fontSize="large" />
          </IconButton>
          <IconButton sx={{ border: 1, mr: 1 }} size="large">
            <GroupsIcon fontSize="large" />
          </IconButton>
          <Button variant="outlined" color="success">
            Add to favorites
          </Button>
        </Box>
        <Box sx={{ display: "flex", flexDirection: "column", ml: "10%" }}>
          <Typography>{props.contactInfo.status}</Typography>
          <Typography>MeetingName-1372</Typography>
        </Box>
      </Box>
    </Box>
  );
};

export default UpperBody;