import { FC } from "react";
import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
import { Styling } from "../general/styling";
import { DefaultNavbar } from "./defaultNavbar";

export const DefaultLayout: FC = ({ children }) => (
  <Styling>
    <Box
      sx={{
        display: "flex",
        width: "100%",
        minHeight: "100vh",
        bgcolor: "background.default",
        color: "text.primary",
        flexDirection: "column",
      }}
    >
      <AppBar position="sticky">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            OpenFood
          </Typography>
        </Toolbar>
      </AppBar>
      <Box sx={{ flexGrow: 1, pt: 2 }}>
        <Container maxWidth="sm">
          <DefaultNavbar />

          <Box sx={{ p: 2 }}>{children}</Box>
        </Container>
      </Box>
    </Box>
  </Styling>
);