import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import localFont from 'next/font/local'
import { Toaster } from '@/components/ui/toaster'
import { Toaster as Toaster2 } from "@/components/ui/sonner"
import ClientWrapper from '@/components/ClientWrapper'
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ['latin'] })

const cb = localFont({
  src: [
    {
      path: './fonts/cbdisplay400.woff2',
      weight: '400',
      style: 'normal'
    },
    {
      path: './fonts/cbdisplay500800.woff2',
      weight: '500',
      style: 'normal'
    },
    {
      path: './fonts/cbdisplay500800.woff2',
      weight: '800',
      style: 'normal'
    }
  ],
  variable: '--font-coinbase'
})

const cbsans = localFont({
  src: [
    {
      path: './fonts/cbsans400.woff2',
      weight: '400',
      style: 'normal'
    },
    {
      path: './fonts/cbsans500800.woff2',
      weight: '500',
      style: 'normal'
    },
    {
      path: './fonts/cbsans500800.woff2',
      weight: '800',
      style: 'normal'
    }
  ],
  variable: '--font-coinbase-sans'
})

const cbicons = localFont({
  src: './fonts/cbicons.woff2',
  variable: '--font-coinbase-icons'
})

const cbicons2 = localFont({
  src: './fonts/cbicons2.woff2',
  variable: '--font-coinbase-icons2'
})

const cbtext = localFont({
  src: './fonts/cbtext.woff2',
  variable: '--font-coinbase-text'
})

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang='en' suppressHydrationWarning>
      <body
        className={`${inter.className} ${cb.variable} ${cbsans.variable} ${cbicons.variable} ${cbicons2.variable} ${cbtext.variable} antialiased min-h-screen `}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <ClientWrapper>{children}</ClientWrapper>
          <Toaster />
          <Toaster2 />
        </ThemeProvider>
      </body>
    </html>
  )
}
