import { AppContent } from '@/components/app-content';
import { AppShell } from '@/components/app-shell';
import { AppSidebar } from '@/components/app-sidebar';
import { AppSidebarHeader } from '@/components/app-sidebar-header';
import type { AppLayoutProps } from '@/types';

/**
 * The frame every CRM screen sits in: sidebar, sticky header, and one content
 * container. Pages supply their own sections but not their own padding, so
 * spacing stays identical from screen to screen.
 */
export default function AppSidebarLayout({
    children,
    breadcrumbs = [],
}: AppLayoutProps) {
    return (
        <AppShell variant="sidebar">
            <AppSidebar />
            <AppContent variant="sidebar" className="min-w-0 overflow-x-clip">
                <AppSidebarHeader breadcrumbs={breadcrumbs} />
                <div className="mx-auto flex w-full max-w-[1700px] flex-1 flex-col gap-5 px-4 py-5 sm:px-6 lg:px-8">
                    {children}
                </div>
            </AppContent>
        </AppShell>
    );
}