import { Link } from "react-router-dom";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import MailIcon from "@mui/icons-material/Mail";
import GitHubIcon from "@mui/icons-material/GitHub";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import { FaGitlab } from "react-icons/fa";
import { SiGitea } from "react-icons/si";

export default function Social() {
  return (
    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="social">
      <Box
        style={{
          display: "flex",
          flex: 1,
          margin: "auto",
          flexWrap: "wrap",
        }}
      >
        <Box style={{ flex: 1 }}>
          <div style={{ display: "flex" }}>
            <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
              Social
            </Typography>
          </div>
          <Box
            style={{
              flex: 1,
              textAlign: "left",
              display: "flex",
              flexGrow: 1,
              flexWrap: "wrap",
              justifyContent: "center",
            }}
          >
            <Card
              style={{ margin: "2rem" }}
              component={Link}
              to={"https://www.linkedin.com/in/elijah-parker-dunemask"}
              sx={{
                maxWidth: 256,
                margin: "3rem auto",
                boxShadow:
                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
                overflow: "visible",
                textDecoration: "none",
              }}
            >
              <div style={{ position: "relative", overflow: "visible" }}>
                <Avatar
                  style={{
                    width: "4rem",
                    height: "4rem",
                    position: "absolute",
                    top: "-2rem",
                    left: "-2rem",
                    backgroundColor: "#0073b1",
                  }}
                >
                  <LinkedInIcon
                    style={{
                      width: "2.125rem",
                      height: "2.125rem",
                      color: "white",
                    }}
                  />
                </Avatar>
              </div>
              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
                <Typography
                  variant="h5"
                  component="div"
                  style={{ color: "#0073b1" }}
                >
                  Linkedin
                </Typography>
                <Typography variant="body2" component="div">
                  Hard working fullstack developer Seeking entry-level part time
                  position or internship with flexible hours to accommodate
                  pursuit of a B.S. degree.
                </Typography>
              </CardContent>
            </Card>
            <Card
              style={{ margin: "2rem" }}
              component={Link}
              to={"https://gitea.dunemask.dev/elysium"}
              sx={{
                maxWidth: 256,
                margin: "3rem auto",
                boxShadow:
                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
                overflow: "visible",
                textDecoration: "none",
              }}
            >
              <div style={{ position: "relative", overflow: "visible" }}>
                <Avatar
                  style={{
                    width: "4rem",
                    height: "4rem",
                    position: "absolute",
                    top: "-2rem",
                    left: "-2rem",
                    backgroundColor: "rgb(96, 153, 38)",
                  }}
                >
                  <SiGitea
                    style={{
                      width: "2.25rem",
                      height: "2.25rem",
                      color: "white",
                    }}
                  />
                </Avatar>
              </div>
              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
                <Typography
                  variant="h5"
                  component="div"
                  style={{ color: "rgb(96, 153, 38)" }}
                >
                  Gitea
                </Typography>
                <Typography variant="body2" component="div">
                  Portfolio showcasing integration with CI/CD and Kubernetes.
                  Technologies include React, Express, Python, Helm, and Docker
                </Typography>
              </CardContent>
            </Card>

            <Card
              style={{ margin: "2rem" }}
              component={Link}
              to={"https://github.com/dunemask"}
              sx={{
                maxWidth: 256,
                margin: "3rem auto",
                boxShadow:
                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
                overflow: "visible",
                textDecoration: "none",
              }}
            >
              <div style={{ position: "relative", overflow: "visible" }}>
                <Avatar
                  style={{
                    width: "4rem",
                    height: "4rem",
                    position: "absolute",
                    top: "-2rem",
                    left: "-2rem",
                    backgroundColor: "#24292f",
                  }}
                >
                  <GitHubIcon
                    style={{
                      width: "2.5rem",
                      height: "2.5rem",
                      color: "white",
                    }}
                  />
                </Avatar>
              </div>
              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
                <Typography
                  variant="h5"
                  component="div"
                  style={{ color: "#24292f" }}
                >
                  Github
                </Typography>
                <Typography variant="body2" component="div">
                  Archived projects specializing in Java, Python, Javascript,
                  HTML, and CSS. Built projects solo and in teams as project
                  lead, and principal contributor.
                </Typography>
              </CardContent>
            </Card>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}