import { MDXProvider } from "@mdx-js/react";
import { NextComponentType, NextPageContext } from "next";
import { AppProps as DefaultAppProps } from "next/app";
import React, { ComponentType, ReactNode } from "react";

import { DefaultLayout } from "@/components/DefaultLayout";
import { Footer } from "@/components/Footer";
import { HorizontalLine } from "@/components/HorizontalLine";
import { Link } from "@/components/Link";
import { Navbar } from "@/components/Navbar";
import {
  GetShapesConfig,
  ShapesBackground,
} from "@/components/ShapesBackground";
import { ThemeProvider } from "@/components/Theme";

import styles from "./_app.module.css";

import "./_app.css";
import "./font.css";

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  const Layout = Component.Layout ?? DefaultLayout;

  return (
    <ThemeProvider>
      <MDXProvider components={{ a: Link, hr: HorizontalLine }}>
        <div className={styles.appContainer}>
          <Navbar />
          {/* Wrapping content with a div to allow for a display: block parent */}
          <div className={styles.contentContainer}>
            <ShapesBackground
              getConfig={Component.getShapesConfig ?? undefined}
            />
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </div>
          <Footer />
        </div>
      </MDXProvider>
    </ThemeProvider>
  );
}

type PageComponent = NextComponentType<
  NextPageContext,
  unknown,
  Record<string, unknown>
> & {
  Layout?: ComponentType<{ children: ReactNode }>;
  getShapesConfig?: GetShapesConfig;
};

type AppProps = DefaultAppProps & {
  Component: PageComponent;
};