import { BreadcrumbBasic } from '@/components/app-breadcrumb';
import { AppSidebar } from '@/components/app-sidebar';
import { ModeToggle } from '@/components/mode-toogle';
import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { Separator } from '@/components/ui/separator';
import { AuthGuard } from '@/guards';
import React from 'react';

const ModulesLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <AuthGuard>
      <SidebarProvider>
        <AppSidebar />
        <main className="flex flex-1 flex-col w-full h-screen overflow-hidden">
          <div className="scroll-stable flex-1 overflow-auto">
            <div className="max-w-380 mx-auto w-full flex flex-col min-h-full">
              <div className="flex gap-3 items-center sticky top-0 bg-background z-50 py-3 px-6 border-b border-border">
                <SidebarTrigger />
                <ModeToggle />
                <Separator orientation="vertical" className="mx-2 h-4" />
                <BreadcrumbBasic />
              </div>
              <div className="p-6 flex-1">{children}</div>
            </div>
          </div>
        </main>
      </SidebarProvider>
    </AuthGuard>
  );
};

export default ModulesLayout;