import React, { AnchorHTMLAttributes } from "react";
import { AppProps } from "next/app";
import { MDXProvider } from "@mdx-js/react";
import { ThemeProvider } from "../components/theme";
import { Navbar } from "../components/Navbar";
import NextLink from "next/link";
import "./_app.css";
import "./font.css";

function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
  const { href, ...other } = props;

  return (
    <NextLink href={href ?? "#"}>
      <a {...other}></a>
    </NextLink>
  );
}

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <ThemeProvider theme="light">
      <MDXProvider components={{ a: Link }}>
        <Navbar />
        <Component {...pageProps} />
      </MDXProvider>
    </ThemeProvider>
  );
}