import { appWithTranslation } from "next-i18next";
import "../styles/globals.css";
import {
  Inter,
  Oswald,
  Quicksand,
  Open_Sans,
  Nova_Mono,
} from "next/font/google";
import localFont from "next/font/local";

const cooper = localFont({
  src: "../../public/PentaCooper-Medium.ttf",
  variable: "--font-cooper",
});

const cooperBold = localFont({
  src: "../../public/PentaCooper-Bold.ttf",
  variable: "--font-cooperBold",
});

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

const oswald = Oswald({
  subsets: ["latin"],
  variable: "--font-oswald",
});

const quicksand = Quicksand({
  subsets: ["latin"],
  variable: "--font-quicksand",
});

const opensans = Open_Sans({
  subsets: ["latin"],
  variable: "--font-opensans",
});

const novamono = Nova_Mono({
  subsets: ["latin"],
  variable: "--font-novamono",
  weight: "400",
});

function MyApp({ Component, pageProps }) {
  return (
    <main
      className={`${inter.variable} font-inter ${oswald.variable} ${quicksand.variable} ${opensans.variable} ${cooper.variable} ${cooperBold.variable} ${novamono.variable}`}
    >
      <Component {...pageProps} />
    </main>
  );
}

export default appWithTranslation(MyApp);
