import "../globals.css";
import type { Metadata } from "next";
import { Outfit } from "next/font/google";
import { Toaster } from "sonner";
import NextTopLoader from "nextjs-toploader";
import Layout from "@/modules/layout";
import { CartModalProvider } from "@/lib/context/cartSidebarModalContext";
import CartSidebarModal from "@/modules/common/cart-sidebar-modal";
import ScrollToTop from "@/modules/common/scroll-to-top";
import GlobalLoader from "@/modules/common/pre-loader";
import { AuthProvider } from "@/lib/context/auth-context";
import { PreviewSliderProvider } from "@/lib/context/preview-slider-context";
import PreviewSliderModal from "@/modules/common/preview-slider-modal";
import GTM from "@/modules/common/gtm";
import TrackPage from "@/modules/common/track-page";

const outfit = Outfit({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-outfit",
  display: "swap",
});

export const metadata: Metadata = {
  title: "Vibrant Printing & Graphics",
  description: "Vibrantprint",
};

// export const revalidate = 86400; // One day

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-full">
      <head>
        <GTM id="GTM-TS48SV" />
      </head>

      <body className={`${outfit.variable} antialiased`}>
        <TrackPage />
        <AuthProvider>
          <CartModalProvider>
            <PreviewSliderProvider>
              <NextTopLoader color="#02bc71" showSpinner={false} height={4} />
              <Layout>
                <main className="relative min-h-screen">{children}</main>
                <CartSidebarModal />
                <PreviewSliderModal />
              </Layout>
            </PreviewSliderProvider>
          </CartModalProvider>
        </AuthProvider>
        <Toaster richColors position="top-center" />
        <ScrollToTop />
        <GlobalLoader />
      </body>
    </html>
  );
}
