// app/layout.tsx
import type { Metadata } from "next";
import { Mona_Sans } from "next/font/google";
import "./icons.css";
import "./globals.css";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { Providers } from "@/utils/ThemeProvider";
import { Suspense } from "react";
import { cookies } from "next/headers";
import PageLoader from "@/components/PageLoader/PageLoader";

const monaSans = Mona_Sans({
  variable: "--font-mona-sans",
  subsets: ["latin"],
  display: "swap",
});

export const metadata: Metadata = {
  title: "Muhkam AI",
  description: "",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const cookieStore = await cookies();
  const lang = cookieStore.get('language')?.value || 'en';
  const dir = lang === 'ar' ? 'rtl' : 'ltr';
  return (
    <html lang={lang} dir={dir} suppressHydrationWarning>
      <body className={`${monaSans.variable} antialiased`}>
        <Providers>
          <Suspense
            fallback={
              <div className="flex min-h-screen items-center justify-center">
                <div className="flex items-center gap-2">
                  <span className="h-2 w-2 animate-bounce rounded-full bg-primary [animation-delay:-0.3s]" />
                  <span className="h-2 w-2 animate-bounce rounded-full bg-primary [animation-delay:-0.15s]" />
                  <span className="h-2 w-2 animate-bounce rounded-full bg-primary" />
                </div>
              </div>
            }
          >
            <main className="text-sm md:text-base">
              {children}
              <ToastContainer theme="dark" />

              {/* <PageLoader /> */}
            </main>
          </Suspense>
        </Providers>
      </body>
    </html>
  );
}
