import { CropProvider } from "@/context/CropContext";
import { GoogleOAuthProvider } from "@react-oauth/google";
import type { Metadata } from "next";
import Header from "@/components/header";
import "./globals.css";
import { Toaster } from "sonner";
import Script from "next/script";
import { LanguageProvider } from "@/context/LanguageContext";

export const metadata: Metadata = {
  title: "YallaCheese",
  description: "Magic Tiles - YallaCheese Arabic",
  icons: {
    icon: "/favicon.svg",
    shortcut: "/favicon.svg",
    apple: "/apple-touch-icon.png",
  },
};

export default function RootLayout({
                                     children,
                                   }: Readonly<{ children: React.ReactNode }>) {
  return (
      <html lang="ar" dir="rtl">
      <body className="antialiased">
      <LanguageProvider>
        <Toaster richColors position="top-center" />

        <Header />

        <Script
            src="https://accounts.google.com/gsi/client?hl=en"
            strategy="beforeInteractive"
        />

        <GoogleOAuthProvider
            clientId={
                process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID ||
                "406631223563-ma1gok71es5eclm7an3tkrrglj832i9c.apps.googleusercontent.com"
            }
        >
          <CropProvider>
            {children}
          </CropProvider>
        </GoogleOAuthProvider>
      </LanguageProvider>
      </body>
      </html>
  );
}