import * as React from "react"

import Toolbar from "@mui/material/Toolbar"
import CssBaseline from "@mui/material/CssBaseline"
import Box from "@mui/material/Box"
import PropTypes from "prop-types"

import Navbar from "../components/Navbar"
import Footer from "../components/Footer"

MainLayout.propTypes = {
  children: PropTypes.element.isRequired,
}

export default function MainLayout({ children }) {
  return (
    <React.Fragment>
      <CssBaseline />
      <Navbar  />
      <Toolbar />
      <Box 
        sx={{
          display: "flex",
          flexDirection: "column",
          minHeight: "100vh"
        }}
      >
        { children }
      </Box>
      <Footer />
    </React.Fragment>
  )
};
