/**
 * Main site Layout
 */
import React from "react";
import Helmet from "react-helmet";
import { useStaticQuery, graphql, PageProps } from "gatsby";

import Footer from "./footer";
import Header from "./header";
import SEO from "./seo";

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 = ({ UserMenu, 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 UserMenu={UserMenu}></Header>
      <div className="pt-16">{children}</div>
      <Footer />
    </>
  );
};

export default Layout;