import React from "react";
import Head from "next/head";
import { Header } from "./header";
import { Footer } from "./footer";
import layoutData from "../../content/global/index.json";
import { Global } from "../../tina/__generated__/types";

export const Layout = ({
    rawData = {},
    data = layoutData,
    children
}: {
  rawData?: object;
  data?: Omit<Global, "id" | "_sys" | "_values">;
  children: React.ReactNode;
}) => {
    return (
        <>
            <Head>
                <title>{ data?.header?.pageTitle }</title>
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />

                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link rel="preconnect" href="https://fonts.gstatic.com" />
                <link
                    href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap"
                    rel="stylesheet"
                />
            </Head>
            <div
                className={ "min-h-screen flex flex-col" }
            >
                <Header data={ data?.header } />
                <div className="flex-1 flex flex-col">
                    { children }
                </div>
                <Footer data={ data?.footer } />
            </div>
        </>
    );
};
