import { Geist_Mono, Inter } from "next/font/google"
import NextTopLoader from "nextjs-toploader"


import { QueryProvider } from "@/shared/components/query-provider"
import { ThemeProvider } from "@/shared/components/theme-provider"
import { Toaster } from "@/shared/components/ui/sonner"
import { ConfirmDialog } from "@/shared/components/confirm-dialog"
import { PromptDialog } from "@/shared/components/prompt-dialog"
import { NuqsAdapter } from "nuqs/adapters/next/app"
import { cn } from "@/shared/lib/utils"
import './globals.css'

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })

export const metadata = {
  title: "Garage ERP Dashboard",
  description: "Manage your garage with ease using Garage ERP Dashboard.",
}

const fontMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={cn("antialiased", fontMono.variable, "font-sans", inter.variable)}
    >
      <body>
        <NextTopLoader color="var(--primary)" height={3} showSpinner={false} />
        <NuqsAdapter>
          <ThemeProvider>
            <QueryProvider>{children}</QueryProvider>
            <Toaster />
            <ConfirmDialog />
            <PromptDialog />
          </ThemeProvider>
        </NuqsAdapter>
      </body>
    </html>
  )
}
