import Header from "@ui_kit/Header/Header";
import Sidebar from "@ui_kit/Sidebar";
import Box from "@mui/material/Box";
import { useTheme, useMediaQuery } from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";

interface Props {
  sidebar: boolean;
  header?: boolean;
  page: JSX.Element;
}

export default function Main({ sidebar, header, page }: Props) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <>
      {header ? <Header /> : <HeaderFull />}
      <Box
        sx={{
          display: "flex",
        }}
      >
        {sidebar ? <Sidebar /> : <></>}
        <Box
          sx={{
            background: theme.palette.background.default,
            width: "100%",
            padding: isMobile ? "15px" : "25px",
            height: "calc(100vh - 80px)",
            overflow: "auto",
            boxSizing: "border-box",
          }}
        >
          {page}
        </Box>
      </Box>
    </>
  );
}