import React, { Fragment, useEffect } from "react";
import dynamic from "next/dynamic";
import "../styles/globals.scss";
import "bootstrap/dist/css/bootstrap-grid.min.css";
import Head from "next/head";
import Header from "../components/Header";
import PurpleBanner from "@cube-dev/purple-banner";
import { DefaultSeo } from 'next-seo';
import { useRouter } from 'next/router';

const Footer = dynamic(() => import("../components/Footer"));

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const { page } = require("cubedev-tracking");
    page();
  }, []);

  const router = useRouter();

  return (
    <Fragment>
      <Head>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
        <link rel="icon" href="/favicon.png" type="image/png" />
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />

        <meta
          name="google-site-verification"
          content="zJjljUArvZ0PVn8naOnxEue8ZX0wh0nsM0q32NYnzzQ"
        />
        <link
          rel="preload"
          href="/fonts/CeraPro-Regular.woff2"
          as="font"
          crossOrigin="anonymous"
        />
        <link
          rel="preload"
          href="/fonts/CeraPro-Medium.woff2"
          as="font"
          crossOrigin="anonymous"
        />
        <style
          dangerouslySetInnerHTML={{
            __html: `
      @font-face {
        font-family: CeraPro;
        src: url(/fonts/CeraPro-Regular.woff2);
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
    
      @font-face {
        font-family: CeraPro;
        src: url(/fonts/CeraPro-Medium.woff2);
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }
    
      @font-face {
        font-family: CeraPro;
        src: url(/fonts/CeraPro-Bold.woff2);
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }
    `,
          }}
        />
      </Head>

      <DefaultSeo
        openGraph={{
          type: "website",
          url: `https://awesome.cube.dev${router.asPath}`,
          images: [
            {
              url: "https://cubedev-blog-images.s3.us-east-2.amazonaws.com/482a86d6-d049-4d92-a0bf-0fcc5830476f.jpeg",
              alt: "Data visualization tools for application developers",
              width: 1200,
              height: 630,
            },
          ],
        }}
        twitter={{
          cardType: "summary_large_image",
          site: "@thecubejs"
        }}
      />

      <PurpleBanner utmSource="awesome"/>
      <Header />
      <Component {...pageProps} />
      <Footer />
    </Fragment>
  );
}

export default MyApp;