import '../styles/globals.css';
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 { Texturina } from 'next/font/google'
import PlayerProvider from '../providers/PlayerProvider';

const client = new QueryClient();
const font = Texturina({ 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, .title {
               font-family: ${font.style.fontFamily};
            }
          `}</style>
          <PlayerProvider>
            <Component {...pageProps} />
          </PlayerProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default MyApp;