import { Box, TextField, useTheme } from "@mui/material";
import { HeaderBar } from "../HeaderBar/HeaderBar";
import { LoadingButton } from "@mui/lab";

export const Layout = () => {
  // contexts
  const theme = useTheme();

  return (
    <Box
      sx={{
        backgroundColor: theme.palette.background.default,
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      <HeaderBar />
      <Box
        sx={{
          display: "flex",
          flexGrow: 1,
          overflow: "auto",
          p: 1,
        }}
      >
        <Box>
          {/* main content goes here buddy */}
          <LoadingButton id="asdfbutton">asdf</LoadingButton>
          <TextField id="asdf" name="asdf"></TextField>
        </Box>
      </Box>
    </Box>
  );
};
