import "./globals.css";
import localFont from "next/font/local";
import { QueryProvider } from "@/components/providers/QueryProvider";
import { SocketProvider } from "@/context/SocketContext";
import { HeroProviders } from "@/components/providers/HeroProvider";
import AuthInitializer from "@/components/AuthInitializer";
import HydrationGuard from "@/components/HydrationGuard";
import GlobalElements from "@/components/Layout/GlobalElements";
import { ToastProvider, ToastViewport } from "@/components/ui/toast";
import IncomingCallWrapper from "@/components/video/IncomingCallWrapper";
// Use local Geist Sans
const geistSans = localFont({
    src: [
        {
            path: "../public/fonts/geist/Geist-Regular.ttf",
            weight: "400",
            style: "normal",
        },
    ],
    variable: "--font-geist-sans",
    display: "swap",
});


export const metadata = {
    title: "Med Bridge Afrik - Accessible Healthcare for Africa",
    description:
        "Consult diaspora doctors, access lab results, and manage health records securely.",
};

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={geistSans.variable}>
            <body className="antialiased" suppressHydrationWarning>
                <HydrationGuard>
                    <QueryProvider>
                        <AuthInitializer />
                        <SocketProvider>
                            <HeroProviders>
                                <IncomingCallWrapper />
                                <ToastProvider>
                                    {children}
                                    <ToastViewport />
                                </ToastProvider>
                                <GlobalElements />
                            </HeroProviders>
                        </SocketProvider>
                    </QueryProvider>
                </HydrationGuard>
            </body>
        </html>
    );
}
