// import "../globals.css";

import { Inter } from "next/font/google";
// import { ToastContainer } from "react-toastify";
import Header from "@/components/home/header/Header";
import Footer from "@/components/home/footer/Footer";
// import "../../styles/globals.css";

import Sidebar from "@/components/home/header/AllCategory";

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 (
      <div className={`${inter.className} antialiased bg-white`}>
        {/* <SessionProvider session={session}> */}
          {/* Toast container with accessibility improvements */}
          {/* <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"
            role="alert"
            aria-live="polite"
          /> */}
          <Header />
          <div className="hidden [@media(min-width:1390px)]:block  flex-row pt-14">
            <Sidebar />
          </div>
          <main className=" h-auto [@media(max-width:1390px)]:pt-[70px]">{children}</main>
          <Footer />
        {/* </SessionProvider> */}
      </div>
  );
}