import { Outlet } from "react-router-dom"
import PublicHeader from "./PublicHeader"
import PublicFooter from "./PublicFooter"
import Basket from "./Basket"
import { useState } from "react"
import { Box, Grid } from "@mui/material"

const LayoutPublic = () => {
    const [isCartOpen, setCartOpen] = useState(false)
    return(
        <Grid
            container
            direction="column"
            justifyContent="space-between"
            alignItems="stretch"
            sx={{minHeight: "100vh"}}
        >
            <PublicHeader
                handleCart={() => setCartOpen(true)}
            />
            <Grid item sx={{flex: "1"}} container>
            <Outlet />
            </Grid>
            <PublicFooter />
            <Basket
                cartOpen={isCartOpen}
                closeCart={() => setCartOpen(false)}
            />
        </Grid>
    )
}

export default LayoutPublic