import type { Metadata } from "next";
import "./globals.css";
import { AuthProvider } from "../lib/authContext";
import { LeaveStoreProvider } from "../lib/leaveStore";
import { NotifProvider } from "../lib/notificationsContext";
import { TrainingStoreProvider } from "../lib/trainingStore";
import { PerformanceStoreProvider } from "../lib/performanceStore";
import { HRStampProvider } from "../lib/hrStampStore";

export const metadata: Metadata = {
  title: "Uwezo Fund HRMS",
  description: "Human Resource Management System",
};

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning={true}>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet" />
      </head>
      <body suppressHydrationWarning={true}>
        <AuthProvider>
          <NotifProvider>
            <LeaveStoreProvider>
              <TrainingStoreProvider>
                <PerformanceStoreProvider>
                <HRStampProvider>
                  {children}
                </HRStampProvider>
                </PerformanceStoreProvider>
              </TrainingStoreProvider>
            </LeaveStoreProvider>
          </NotifProvider>
        </AuthProvider>
      </body>
    </html>
  );
}
