import type { Metadata, Viewport } from "next"
import { Cairo } from "next/font/google"
import { Suspense } from "react"
import { AuthProvider } from "@/contexts/auth-context"
import { I18nProvider } from "@/contexts/i18n-context"
import ErrorBoundary from "@/components/ErrorBoundary"
import "./globals.css"

const cairo = Cairo({
  subsets: ["arabic", "latin"],
  display: "swap",
  variable: "--font-cairo",
  weight: ["300", "400", "500", "600", "700", "800"],
})

export const metadata: Metadata = {
  title: i18n.t('app.layout.text_1'),
  description:
    i18n.t('app.layout.text_2'),
}

export const viewport: Viewport = {
  themeColor: "#0f1117",
  width: "device-width",
  initialScale: 1,
}

import { Toaster } from "sonner"
import i18n from "@/lib/i18n";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ar" dir="rtl" className={`${cairo.variable} bg-background`} suppressHydrationWarning>
      <body className="font-sans antialiased">
        <I18nProvider>
          <AuthProvider>
            <ErrorBoundary>
              <Suspense fallback={null}>{children}</Suspense>
            </ErrorBoundary>
          </AuthProvider>
        </I18nProvider>
        <Toaster position="bottom-left" richColors />
      </body>
    </html>
  )
}
