import * as React from "react"
import { Link as GatsbyLink } from "gatsby"
import { AppBar, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
import NavMenu from "./nav-menu"
import theme from "./theme"
import Footer from "./footer"

const Layout = ({ location, title, children }) => {
  // const rootPath = `${__PATH_PREFIX__}/`
  // const isRootPath = location.pathname === rootPath
  // let header

  // if (isRootPath) {
  //   header = (
  //     <h1 className="main-heading">
  //       <Link to="/">{title}</Link>
  //     </h1>
  //   )
  // } else {
  //   header = (
  //     <Link className="header-link-home" to="/">
  //       {title}
  //     </Link>
  //   )
  // }

  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <AppBar
          component="header"
          color="transparent"
          position="relative"
          elevation={0}
        >
          <Toolbar>
            <Link
              underline="hover"
              component={GatsbyLink}
              to="/"
              sx={{ textTransform: "lowercase" }}
            >
              {title}
            </Link>
          </Toolbar>
        </AppBar>
        <Container maxWidth="md" sx={{ py: 8 }}>
          <Grid container spacing={2}>
            <Grid item xs={12} md={3}>
              <NavMenu location={location} />
            </Grid>
            <Grid item xs={12} md={9}>
              <main>{children}</main>
            </Grid>
          </Grid>
        </Container>
        <Footer />
      </ThemeProvider>
    </>
  )
}

export default Layout