import React, { FC } from "react";
import {
  AppBar,
  Box,
  Button,
  Container,
  Link as MuiLink,
  Toolbar,
  Typography,
} from "@mui/material";
import { Styling } from "../general/styling";
import { BreadCrumbs } from "./breadCrumbs";
import Link from "next/link";

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>
          <Box sx={{ display: "flex", gap: 2 }}>
            <Link href="/auth/login" passHref>
              <MuiLink>
                <Button>Login</Button>
              </MuiLink>
            </Link>
            <Link href="/auth/sign-up" passHref>
              <MuiLink>
                <Button>Sign up</Button>
              </MuiLink>
            </Link>
          </Box>
        </Toolbar>
      </AppBar>
      <Box sx={{ flexGrow: 1, pt: 2 }}>
        <Container maxWidth="sm">
          <BreadCrumbs />

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