import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Box from "@mui/material/Box";
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";

const socialLinks = [
  {
    url: "https://www.linkedin.com/in/elijah-parker-dunemask/",
    icon: <LinkedInIcon />,
  },
  {
    url: "mailto: elijahglennparker@outlook.com",
    icon: <MailIcon />,
  },
  {
    url: "https://gitlab.com/dunemask",
    icon: <FaGitlab />,
  },
  {
    url: "https://github.com/dunemask",
    icon: <GitHubIcon />,
  },
];

export default function Social() {
  return (
    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="contact">
      <Accordion
        style={{ boxShadow: "none" }}
        defaultExpanded
        disableGutters
        square
      >
        <AccordionSummary content={{ margin: 0 }} style={{ margin: 0 }}>
          <h3 style={{ paddingRight: 20 }}>Social</h3>
          <Box
            style={{ display: "flex", marginLeft: "auto", flexWrap: "wrap" }}
          >
            {socialLinks.map((v, i) => (
              <a
                key={i}
                href={v.url}
                style={{ margin: "auto 0", color: "black", padding: "10px" }}
              >
                {v.icon}
              </a>
            ))}
          </Box>
        </AccordionSummary>
      </Accordion>
    </Box>
  );
}