"use client";

import Footer from "@/components/Footer";
import Header from "@/components/Header";
import HeroSection from "@/components/HeroSection";
import BeatHighscoreSection from "@/components/BeatHighscoreSection";
import Leaderboard from "@/components/Leaderboard";
import Activities from "@/components/Activities";
import GlobalChat from "@/components/GlobalChat";
import { PrivyProvider } from "@privy-io/react-auth";
import { toSolanaWalletConnectors } from "@privy-io/react-auth/solana";
import { Toaster } from "sonner";
import { PracticeGameProvider } from "@/contexts/PracticeGameContext";
import TopBanner from "@/components/TopBanner";

export default function Home() {

  return (

    <div className="bg-[rgb(22,22,22)]">
      <PrivyProvider
        appId="cmdufqskm01qojr0aso20uj68"
        clientId="client-WY6NygKrUSCSg4yX8qhmcAuKQ24kcff6pKpFZFA2NZGJL"
        // sekret="UdHftXLutZNkN3xmJpaudc8oGp5eP1Q3bhJFdSt5pLpJ6gp7HCaUqokN3n2kbbdRy8TR1xiaFJkEuqeU8jAvW1M"
        config={{
          // Customize Privy's appearance in your app
          appearance: {
            theme: 'dark',
            accentColor: '#f89016',
            logo: 'https://i.postimg.cc/3xymQbkZ/Logo-no-BG-4.png'
          },
          // Create embedded wallets for users who don't have a wallet
          embeddedWallets: {
            createOnLogin: 'users-without-wallets'
          },
          externalWallets: {
            solana: { connectors: toSolanaWalletConnectors() }
          }

        }}
      >
        <PracticeGameProvider>
          <>
            <Toaster position="top-right" richColors />
            <Header />
            <TopBanner/>
            <BeatHighscoreSection />

            <HeroSection />
            
            <div className="container mt-10"></div>
            
            <Leaderboard />
            <div className="container mt-10"></div>
            
            <Activities />
            <div className="container mt-10"></div>
            <GlobalChat />
            <Footer />
          </> 
        </PracticeGameProvider>
      </PrivyProvider>
    </div>

  );

}