export const dynamic = "force-dynamic";

import type { Metadata } from "next";

import Logo from "@/components/Logo";
import Nav from "@/components/Nav";
import DashboardHeader from "@/components/DashboardHeader";
import Protected from "../../Context/Protected";
import UserHeaderBox from "@/components/UserHeaderBox";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <Protected>
      <section className="bg-gray-50 flex h-screen w-screen">
        <div className="hidden   w-72  h-full overflow-y-auto  bg-white border-r border-gray-300 shadow-sm sm:flex flex-col">
          {/* LOGO  */}
          <Logo />
          {/* MENU  */}
          <Nav />
          <UserHeaderBox />
        </div>
        <div className="flex-1 flex flex-col bg-gray-400/20 h-full  overflow-x-auto">
          <div className="">
            <DashboardHeader />
          </div>
          <div className="flex-1 w-full overflow-x-auto overflow-y-auto">
            {children}
          </div>
        </div>
      </section>
    </Protected>
  );
}