import React, { Suspense } from "react";
import Box from "@mui/material/Box";
import Header from "./Header.jsx";
import Projects from "./Projects.jsx";
import Contact from "./Contact.jsx";
//import Environments from "./Environments.jsx";
import ContentWrapper from "@components/ContentWrapper.jsx";

const Skills = React.lazy(() => import("./Skills.jsx"));
const Social = React.lazy(() => import("./Social.jsx"));
const Education = React.lazy(() => import("./Education.jsx"));
const Experience = React.lazy(() => import("./Experience.jsx"));
const About = React.lazy(() => import("./About.jsx"));

export default function Delta() {
  return (
    <ContentWrapper id="delta">
      <Header />
      <Projects />
      <Suspense>
        <About />
        <Box style={{ display: "flex", flexWrap: "wrap" }}>
          <Education />

          <Experience />
        </Box>
        <Skills />
        <Social />
      </Suspense>
      <Contact />
    </ContentWrapper>
  );
}