import "./globals.css";
import "react-toastify/dist/ReactToastify.css";

import { Inter } from "next/font/google";
import { getServerSession } from "next-auth";
import SessionProvider from "./(home)/SessionProvider";
import { authOptions } from "@/app/api/auth/[...nextauth]/auth-options";
import StoreProvider from "@/redux/storeProvider";
import { ToastContainer } from "react-toastify";

const inter = Inter({
  subsets: ["latin"],
  display: "swap", // Better font loading behavior
  variable: "--font-inter", // CSS variable for potential future use
});

export const metadata = {
  title: "Best Online Store",
  description: "",
  icons: {
    icon: "/store.png",
  },
  metadataBase: new URL(
    process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"
  ),
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  let session = null;

  try {
    session = await getServerSession(authOptions);
  } catch (error) {
    console.error("Failed to fetch session:", error);
  }

  return (
    <StoreProvider>

      <SessionProvider session={session}>
        <html lang="en">
          <body className={`${inter.className} antialiased bg-white`}>

            <ToastContainer
              toastClassName={"max-sm:w-1/2 w-full"}
              position="bottom-left"
              autoClose={4000}
              hideProgressBar={false}
              newestOnTop={false}
              closeOnClick
              rtl={false}
              pauseOnFocusLoss
              draggable
              pauseOnHover
              theme="colored"
            />

            <main className=" h-auto">{children}</main>
          </body>
        </html>
      </SessionProvider>

    </StoreProvider>
  );
}
