import {Box} from '@mui/material'
import {Footer} from '../components/Footer'
import {Header} from '../components/Header'
import {makeStyles} from "@mui/styles";
import React, { PropsWithChildren } from "react";
// import {InteractiveArea} from "./InteractiveArea";
// import {PageNotFound} from "./PageNotFound";

const useStyles = makeStyles(() => ({
    container: {
        background: 'background.default',
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 1,
        height: '100vh',
        maxheight: '100vh',
    }
}))

interface Props {}

export const Layout = (props: PropsWithChildren<Props>) => {
    const classes = useStyles();
    return (
        <>
            <Box className={classes.container}>
                <Header/>
                {props.children}
                <Footer/>
            </Box>
        </>
    )
}