/**
 * Main site Layout
 */
import React from "react"
import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
import SEO from "./seo"
import Header from "../components/Header"
import Footer from "../components/Footer"
interface Props {
    children: React.ReactNode
    UserMenu?: React.ReactNode
}

/**
 * Default Layout with Header (Helmet & SEO) and Footer
 * @param {Props} props - Page content
 * @returns {JSX.Element} The complete page
 */
const Layout = ({ children }: Props): JSX.Element => {
    const query = useStaticQuery(graphql`
        query LayoutQuery {
            site {
                siteMetadata {
                    icon
                }
            }
        }
    `)

    return (
        <>
            <Helmet>
                <link
                    rel="icon"
                    href={query.site.siteMetadata.icon}
                    type="image/png"
                />
            </Helmet>
            <SEO />
            <Header />
            <div className="pt-0">{children}</div>
            <Footer />
        </>
    )
}

export default Layout