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 Environments() {
  return (
    <Box style={{ padding: 10 }}>
      <Accordion
        style={{ boxShadow: "none" }}
        defaultExpanded
        disableGutters
        square
      >
        <AccordionSummary
          content={{ margin: 0 }}
          expandIcon={<ExpandMoreIcon />}
          style={{ margin: 0 }}
        >
          <h3>Environments</h3>
        </AccordionSummary>
        <AccordionDetails>
          <Box
            style={{
              display: "flex",
              flex: 1,
              margin: "auto",
              flexWrap: "wrap",
            }}
          >
            <Box style={{ flex: 1, textAlign: "left" }}>
              <div style={{ display: "inline-flex" }}>
                <h3 style={{ fontSize: 20 }}>Kubernetes</h3>
                <SiKubernetes
                  style={{
                    margin: "auto",
                    marginLeft: 10,
                    width: 40,
                    height: 40,
                  }}
                />
              </div>
              <p>
                Section about deployment of applications to a Kubernetes
                cluster.
              </p>
            </Box>
          </Box>
          <Box
            style={{
              display: "flex",
              flex: 1,
              margin: "auto",
              flexWrap: "wrap",
            }}
          >
            <Box style={{ flex: 1, textAlign: "left" }}>
              <div style={{ display: "inline-flex" }}>
                <h3 style={{ fontSize: 20 }}>Garden</h3>
                <img
                  src="/images/gardenio-icon.svg"
                  style={{
                    margin: "auto",
                    marginLeft: 10,
                    width: 28,
                    height: 28,
                  }}
                />
              </div>
              <p>
                Section about deployment using Garden for development and
                production
              </p>
            </Box>
          </Box>
        </AccordionDetails>
      </Accordion>
    </Box>
  );
}
