/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
 */

import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import Footer from "./footer"
import "./layout.css"

const Layout = ({menu, children }) => {
    const data = useStaticQuery(graphql`
        query SiteTitleQuery {
            site {
            siteMetadata {
                title
            }
            }
        }
    `)

    return (
        <>
            <Header menu={menu} siteTitle={data.site.siteMetadata?.title || `Title`} />
            <div>
                <main>{children}</main>
            </div>
            <Footer menu={menu}></Footer>
        </>
    )
}

export default Layout
