import * as React from "react";
import { Box } from "@mui/material";
import { ThemeProvider } from "@mui/material";
import theme from "../../theme";
import CssBaseline from '@mui/material/CssBaseline';
import Menu from "../Menu";
import Header from "../Header";
import Content from "../Content";


const CenterBox: React.FC = () =>  {
  return (
    <React.Fragment>
      <ThemeProvider theme={theme}>
      <CssBaseline />
        <Box sx={{
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.secondary.main,
            height: "100%"
        }}>
          <Box sx={{
            backgroundColor: theme.palette.content.main,
            display: "flex",
            width: "100%",
            height: "100%"
          }}>

            <Menu />
            <Box sx={{ 
                width: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center"
            }}>
              <Header />
              <Content />
            </Box>
          </Box>

        </Box>
      </ThemeProvider>
    </React.Fragment>
  );
}


export default CenterBox;