"use client";

import { FC, PropsWithChildren, useState } from "react";
import { Grid } from "@mui/material";
import { CssBaseline } from "@mui/material";
import { css, Global } from "@emotion/react";
import { fonts } from "@/app/_styles/theme";
import { Sidebar } from "./Sidebar";

export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
  const [open, setOpen] = useState(true);
  const { roboto } = fonts;
  const globalCSS = css`
    * {
      font-family: ${roboto.style.fontFamily};
    }
  `;

  return (
    <>
      <Global styles={globalCSS} />
      <CssBaseline />
      <Grid container direction="row">
        <Sidebar open={open} setOpen={setOpen} />
        <Grid
          item
          sx={{ ml: open ? "270px" : "70px", width: "100%", height: "100vh" }}
        >
          {children as any}
        </Grid>
      </Grid>
    </>
  );
};