import type { Metadata } from "next"
import { ThemeProvider } from "@/components/theme-provider"
import { AuthProvider } from "@/lib/auth"
import { Providers } from "@/app/providers"
import { Toaster } from "@/components/ui/sonner"
import { BrandProvider } from "@/components/brand-provider"
import "@hanzo/font/css"
import "@/app/globals.css"

// `output: "export"` prerenders this at build time, where there is no request
// and therefore no host to name a brand from. The static <head> carries no title
// and an empty icon, so it names no brand and the browser asks for no
// /favicon.ico; BrandProvider writes the host's title and favicon in the browser,
// and with no title element of the layout's own there is nothing to overwrite it.
export const metadata: Metadata = {
  icons: { icon: "data:," },
  description:
    "Multi-chain RPC, token and NFT APIs, smart wallets, webhooks and account abstraction.",
  keywords: ["blockchain", "RPC", "API", "Web3", "NFT", "DeFi", "smart contracts", "developer tools"],
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="min-h-screen bg-background font-sans antialiased">
        <Providers>
          {/* BrandProvider wraps ThemeProvider: the brand owns the default
              colour scheme, so the theme cannot be resolved before the brand
              is. */}
          <BrandProvider>
            <AuthProvider>
              <ThemeProvider>
                {children}
                <Toaster />
              </ThemeProvider>
            </AuthProvider>
          </BrandProvider>
        </Providers>
      </body>
    </html>
  )
}