import { AppSidebar } from '@/components/app-sidebar';
import { SidebarProvider } from '@/components/ui/sidebar';
import { AuthGuard } from '@/guards';
import React from 'react';
import { ModuleShellHeader } from './_components/module-shell-header';

const ModulesLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <AuthGuard>
      <SidebarProvider>
        <AppSidebar />
        <main className="flex h-screen min-w-0 flex-1 flex-col overflow-hidden">
          <div className="scroll-stable min-w-0 flex-1 overflow-auto">
            <div className="mx-auto flex min-h-full w-full min-w-0 max-w-380 flex-col">
              <ModuleShellHeader />
              <div className="min-w-0 flex-1 p-6">{children}</div>
            </div>
          </div>
        </main>
      </SidebarProvider>
    </AuthGuard>
  );
};

export default ModulesLayout;