import Card from "@mui/material/Card";
import { Link } from "react-router-dom";
import CardContent from "@mui/material/CardContent";
import CardActions from "@mui/material/CardActions";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import Avatar from "@mui/material/Avatar";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";

import LinkedInIcon from "@mui/icons-material/LinkedIn";
import MailIcon from "@mui/icons-material/Mail";

export default function ContactCard(props) {
  const { name, title, phone, email, linkedin, description, avatar } = props;

  return (
    <Card
      sx={{
        padding: "24px 0px 0px 0px",
        width: 320,
        maxWidth: "100%",
        margin: 2,
        boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
      }}
    >
      <CardContent sx={{ alignItems: "center", textAlign: "center", pb: 0 }}>
        <Avatar
          src={avatar}
          sx={{ width: "4.5rem", height: "4.5rem", margin: "0 auto" }}
          component={Link}
          to={linkedin}
        />
        <Chip
          size="sm"
          label={title}
          sx={{
            mt: -1,
            mb: 1,
            zIndex: 5,
            backgroundColor: "rgba(0, 115, 177,.1)",
            color: "#0073b1",
          }}
        />
        <Typography level="title-lg">{name}</Typography>
        <Typography level="body-sm" sx={{ maxWidth: "24ch", margin: "0 auto" }}>
          {description}
        </Typography>
      </CardContent>
      <CardActions style={{ display: "flex", justifyContent: "center" }}>
        <IconButton size="sm" variant="plain" component={Link} to={linkedin} sx={{ color: "#0073b1" }}>
          <LinkedInIcon />
        </IconButton>
        <IconButton size="sm" variant="plain" color="neutral" component={Link} to={email}>
          <MailIcon />
        </IconButton>
      </CardActions>
    </Card>
  );
}