import type { Metadata, Viewport } from "next";
import { IBM_Plex_Sans_Arabic, Pacifico } from "next/font/google";
import "./globals.css";
import { I18nProvider } from "@/lib/i18n";
import ApiToast from "@/components/ApiToast";

export const dynamic = "force-dynamic";

const ibmPlexSansArabic = IBM_Plex_Sans_Arabic({
  weight: ["400", "500", "700"],
  subsets: ["arabic"],
  display: "swap",
  variable: "--font-ibm-plex-sans-arabic",
});

const pacifico = Pacifico({
  weight: "400",
  subsets: ["latin"],
  display: "swap",
  variable: "--font-pacifico",
});

export const metadata: Metadata = {
  title: "A-R | لوحة تحكم المقاهي",
  description: "منصة A-R الترفيهية - لوحة تحكم المقاهي",
  icons: {
    icon: "/logo-ar.png",
    apple: "/logo-ar.png",
  },
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ar" dir="rtl" suppressHydrationWarning={true}>
      <body
        className={`${ibmPlexSansArabic.variable} ${pacifico.variable} ${ibmPlexSansArabic.className} antialiased bg-[#FAFAF8] text-[#1A1A2E]`}
      >
        <I18nProvider>
          {children}
          <ApiToast />
        </I18nProvider>
      </body>
    </html>
  );
}