import { ClerkProvider } from '@clerk/nextjs'
import { Geist, Geist_Mono, Noto_Sans_Arabic } from "next/font/google"

import "@workspace/ui/globals.css"
import { Providers } from "@/components/providers"
import { Toaster } from "@workspace/ui/components/sonner";

export const dynamic = "force-dynamic";

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

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

// Geist carries no Arabic glyphs, so Arabic text fell back to whatever the
// browser happened to pick. Loaded for every visitor because next/font only
// fetches the faces a page actually renders, and switching language must not
// wait on a font request.
const fontArabic = Noto_Sans_Arabic({
  subsets: ["arabic"],
  variable: "--font-arabic",
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={`${fontSans.variable} ${fontMono.variable} ${fontArabic.variable} font-sans antialiased `}
        suppressHydrationWarning
      >
        <ClerkProvider
          publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
          afterMultiSessionSingleSignOutUrl="/sign-in"
          taskUrls={{
            "choose-organization": "/org-selection",
          }}
          appearance={{
            variables: {
              colorPrimary: "#3C82F6"
            }
          }}
        >
          <Providers>
            <Toaster />
            {children}
          </Providers>
        </ClerkProvider>
      </body>
    </html>
  )
}
