import * as React from "react";
import { Box, Stack } from "@mui/material";
import { Outlet } from "react-router-dom";
import SideMenu from "../../components/SideMenu";
import AppNavbar from "../../components/AppNavbar";
import Header from "../../components/Header";
import AppTheme from "../../shared-theme/AppTheme";

interface LayoutProps {
	customStyles?: React.CSSProperties;
}

const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
	return (
		<AppTheme>
			<Box
				sx={{
					display: "flex",
					height: "auto",
					flexDirection: { xs: "column", md: "row" },
					width: "100%",
					margin: 0,
					padding: 0,
				}}
			>
				{/* SideMenu - Responsive, shown only on large screens */}
				<Box
					sx={{
						display: { xs: "none", md: "block" },
						// width: 250,
					}}
				>
					<SideMenu />
				</Box>

				{/* Navbar - Always visible */}
				<AppNavbar />

				<Box
					component="main"
					sx={(theme) => ({
						display: "flex",
						flexDirection: "column",
						height: "100vh",
						flexGrow: 1,
						backgroundColor: theme.vars
							? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
							: theme.palette.background.default,
						overflow: "auto",
						...customStyles,
						mt: { xs: 8, md: 0 },
						padding: 0,
					})}
				>
					<Stack
						spacing={2}
						sx={{
							display: "flex",
							flex: 1,
							justifyItems: "center",
							alignItems: "center",
							mx: 3,
							pb: 5,
							mt: { xs: 3, md: 0 },
						}}
					>
						<Header />
						<Outlet />
					</Stack>
				</Box>
			</Box>
		</AppTheme>
	);
};

export default DashboardLayout;
