import * as React from "react";
import { Box, Stack } from "@mui/material";
import { Outlet } from "react-router-dom";
import SideMenu from "../../components/SideMenu/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%",
						height: "100vh", // Full height from root, not auto
					overflow: "hidden", 
					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.palette.background.default,
						overflow: "auto",
						overflowX: "hidden",
						...customStyles,
						mt: { xs: 8, md: 0 },
						padding: 0,
					})}
				>
					<Box sx={{ height: "84px", flex: "0 0 84px" }}>
						<Header />
					</Box>
					<Stack
						spacing={2}
						sx={{
							padding: "30px",
							display: "flex",
							flex: 1,
							justifyItems: "center",
							alignItems: "center",
							// mx: { xs: 1, sm: 3 },
							// pb: 5,
							mt: { xs: 3, md: 0 },
							width: "100%",
							boxSizing: "border-box",
						}}
					>
						<Outlet />
					</Stack>
				</Box>
			</Box>
		</AppTheme>
	);
};

export default DashboardLayout;