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="md">
                    <BreadCrumbs/>

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