import { FaReact, FaPython, FaJava } from "react-icons/fa";
import { SiKubernetes } from "react-icons/si";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Box from "@mui/material/Box";

export default function Projects() {
  return (
    <Box style={{ padding: 10 }}>
      <Accordion style={{ boxShadow: "none", margin: 0 }} defaultExpanded disableGutters square>
        <AccordionSummary content={{ margin: 0 }} expandIcon={<ExpandMoreIcon />} style={{ margin: 0 }}>
          <h3>Projects</h3>
        </AccordionSummary>
        <AccordionDetails>
          <Box
            className="top-projects"
            style={{
              display: "flex",
              flex: 1,
              margin: "auto",
              flexWrap: "wrap",
            }}
          >
            <Box style={{ flex: 1, padding: "0 10px" }}>
              <div style={{ display: "inline-flex" }}>
                <h3>React</h3>
                <FaReact
                  style={{
                    margin: "auto",
                    marginLeft: 10,
                    width: 20,
                    height: 20,
                  }}
                />
              </div>
              <p>Khufu</p>
              <p>Qualiteer</p>
            </Box>
            <Box style={{ flex: 1, padding: "0 10px" }}>
              <div style={{ display: "inline-flex" }}>
                <h3>Kubernetes</h3>
                <SiKubernetes
                  style={{
                    margin: "auto",
                    marginLeft: 10,
                    width: 20,
                    height: 20,
                  }}
                />
              </div>
              <p>Oasis</p>
              <p>Garden</p>
            </Box>
          </Box>
          <Box
            className="top-projects"
            style={{
              display: "flex",
              flex: 1,
              margin: "auto",
              flexWrap: "wrap",
            }}
          >
            <Box style={{ flex: 1, padding: "0 10px" }}>
              <div style={{ display: "inline-flex" }}>
                <h3>Python</h3>
                <FaPython
                  style={{
                    margin: "auto",
                    marginLeft: 10,
                    width: 20,
                    height: 20,
                  }}
                />
              </div>
              <p>Reed</p>
              <p>TODO</p>
            </Box>
            <Box style={{ flex: 1, padding: "0 10px" }}>
              <div style={{ display: "inline-flex" }}>
                <h3>Java</h3>
                <FaJava
                  style={{
                    margin: "auto",
                    marginLeft: 10,
                    width: 20,
                    height: 20,
                  }}
                />
              </div>
              <p>Dunemasking</p>
              <p>JavaFX</p>
            </Box>
          </Box>
        </AccordionDetails>
      </Accordion>
    </Box>
  );
}