import type { Metadata, Viewport } from "next";

import { NuqsAdapter } from "nuqs/adapters/next/app";

import { TailwindIndicator } from "@/components/tailwind-indicator";
import { ThemeProvider } from "@/components/theme-provider";
import { ThemeToggle } from "@/components/theme-toggle";
import { Header } from "@/components/header";
import { Footer } from "@/components/footer";

import { siteConfig } from "@/lib/config";
import { cn, constructMetadata } from "@/lib/utils";

import ReactQueryProvider from "@/providers/react-query-provider";
import MyPrivyProvider from "@/providers/privy-provider";

// import { GeistMono } from "geist/font/mono";
// import { GeistSans } from "geist/font/sans";
import { montserrat } from "./fonts";

import "./globals.css";

import { Toaster } from "@/components/ui/sonner";

export const metadata: Metadata = constructMetadata({
  title: `${siteConfig.name} | ${siteConfig.description}`,
});

export const viewport: Viewport = {
  colorScheme: "dark",
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning className={montserrat.className}>
      <body
        className={cn(
          "min-h-screen bg-background antialiased w-full mx-auto scroll-smooth",
          montserrat.className
        )}
      >
        <ReactQueryProvider>
          <MyPrivyProvider>
            <NuqsAdapter>
              <ThemeProvider
                attribute="class"
                defaultTheme="dark"
                enableSystem={false}
              >
                <Header />
                {/* <main></main> */}
                {children}
                {/* <Footer /> */}
                <ThemeToggle />
                <TailwindIndicator />
                <Toaster richColors />
              </ThemeProvider>
            </NuqsAdapter>
          </MyPrivyProvider>
        </ReactQueryProvider>
      </body>
    </html>
  );
}
