import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ThemeProvider } from "styled-components";
import { InvertedTheme } from "@equilab/ui-curated";
import Head from "next/head";
import { FirebaseProvider } from "../contexts/firebase";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Luminous AF</title>
        <meta property="og:title" content="LUMINOUS Art Foundation" />
        <meta
          property="og:description"
          content="A non-for-profit Art Foundation aimed at researching, producing, and sharing knowledge around cutting-edge digital forms of contemporary art"
        />
        <script
          async
          src="https://www.googletagmanager.com/gtag/js?id=G-EME4Z95BLQ"
        ></script>
        <meta name="theme-color" content="#707CB9"></meta>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());

              gtag('config', 'G-EME4Z95BLQ');
            `,
          }}
        />
      </Head>
      <ThemeProvider theme={InvertedTheme}>
        <FirebaseProvider>
          <Component {...pageProps} />
        </FirebaseProvider>
      </ThemeProvider>
    </>
  );
}

export default MyApp;
