import React from "react";
import { Container } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import "./site.css";
import TopNav from "./components/TopNav";
import LeftNav from "./components/LeftNav";
import Main from "./components/Main";

const THEME = createTheme({
  typography: {
    fontFamily: `"Dosis", "Nunito", sans-serif`,
    fontSize: 14,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
  },
  palette: {
    header: {
      main: "#4D81B7",
      contrastText: "header background",
    },
  },
  flexBox: {
    display: "flex",
  },
});

const Layout = (props) => {
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };
  return (
    <ThemeProvider theme={THEME}>
      <TopNav handleDrawerOpen={handleDrawerOpen}/>
      <LeftNav handleDrawerClose= {handleDrawerClose} open={open}/>
      <Main open={open} maxWidth="lg">{props.children}</Main>
    </ThemeProvider>
)};
export default Layout;