// Layout for fullscreen pages

import { Box, createTheme, ThemeProvider, useTheme } from "@mui/material";
import { Outlet } from "react-router-dom";

export default function MainLayout() {
    const theme = useTheme()
    const innerTheme = createTheme(theme)

    return (
        <ThemeProvider theme={innerTheme}>
            <Box
                sx={{
                    color: (theme) => theme.palette.mode === 'light'
                        ? theme.palette.grey[900]
                        : theme.palette.grey[100],
                    backgroundColor: (theme) =>
                        theme.palette.mode === 'light'
                            ? theme.palette.grey[100]
                            : theme.palette.grey[900],
                    flexGrow: 1,
                    maxHeight: "100vh",
                    height: '100%',
                    overflow: 'auto',
                }}
            >
                <Outlet />
            </Box>
        </ThemeProvider>
    )
}