import type { Metadata } from "next";
import { Cairo } from "next/font/google";
import { Toaster } from "sonner";
import UnreadNotificationsInit from "@/components/UnreadNotificationsInit";
import "./globals.css";

const cairo = Cairo({
  subsets: ["arabic", "latin"],
  display: "swap",
  variable: "--font-cairo",
});

export const metadata: Metadata = {
  title: "BEEPBEEP — لوحة المستثمر",
  description: "لوحة تحكم المستثمر في تطبيق BEEPBEEP لتأجير السكوترات",
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="ar" dir="rtl" suppressHydrationWarning={true}>
      <body className={`${cairo.variable} antialiased font-['Cairo'] bg-[#13151A]`}>
        <UnreadNotificationsInit />
        {children}
        <Toaster
          dir="rtl"
          theme="dark"
          position="top-left"
          toastOptions={{
            style: {
              background: '#2A2D36',
              border: '1px solid rgba(255,255,255,0.08)',
              color: '#ffffff',
              fontFamily: 'Cairo, sans-serif',
              direction: 'rtl',
            },
          }}
        />
      </body>
    </html>
  );
}
