import React from "react";
import { Box, Toolbar, IconButton, Typography } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { SideMenu } from "./SideMenu";
import type { ResourceConfig } from "../types";

interface LayoutProps {
  resources: ResourceConfig[];
  basePath: string;
  children: React.ReactNode;
}

export function Layout({ resources, basePath, children }: LayoutProps) {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  return (
    <Box sx={{ display: "flex", minHeight: "calc(100vh - 128px)" }}>
      <SideMenu
        resources={resources}
        basePath={basePath}
        mobileOpen={mobileOpen}
        onClose={() => setMobileOpen(false)}
      />
      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
        <Toolbar>
          <IconButton
            color="inherit"
            edge="start"
            onClick={() => setMobileOpen(true)}
            sx={{ mr: 2, display: { md: "none" } }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap sx={{ display: { md: "none" } }}>
            Admin Panel
          </Typography>
        </Toolbar>
        {children}
      </Box>
    </Box>
  );
}