import "../styles/globals.css";
import "../styles/pixelatedBorders.scss";
import "@rainbow-me/rainbowkit/styles.css";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, midnightTheme } from "@rainbow-me/rainbowkit";
import { config } from "../wagmi";
import { Press_Start_2P, Texturina } from "next/font/google";
import PlayerProvider from "../providers/PlayerProvider";
import ModalProvider from '../providers/ModalProvider';


const client = new QueryClient();
const font = Texturina({ weight: ["400"], subsets: ["latin"] });

// Tavern keeper quote
const fontPixel = Press_Start_2P({ weight: ["400"], subsets: ["latin"] });

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider theme={midnightTheme()}>
          <style jsx global>{`
            html,
            body,
            p,
            span,
            a {
              font-family: ${font.style.fontFamily};
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            button,
            .title {
              font-family: ${font.style.fontFamily};
            }
            .pixelFont {
               font-family: ${fontPixel.style.fontFamily};
            }
          `}</style>
          <PlayerProvider>
            <ModalProvider>
              <Component {...pageProps} />
            </ModalProvider>
          </PlayerProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default MyApp;