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 { ImpersonationBanner } from '@/components/impersonation-banner';
import { JabesWomenBanner } from '@/components/jabes-women-banner';
import { TwoFactorSuggestionBanner } from '@/components/two-factor-suggestion-banner';
import { useJabesWomenTheme } from '@/hooks/use-jabes-women';
import type { AppLayoutProps } from '@/types';

export default function AppSidebarLayout({
    children,
    breadcrumbs = [],
}: AppLayoutProps) {
    useJabesWomenTheme();

    return (
        <AppShell variant="sidebar">
            <AppSidebar />
            <AppContent variant="sidebar" className="overflow-x-hidden">
                <div className="px-4 pt-4 pb-[max(2.5rem,env(safe-area-inset-bottom))] sm:px-6 lg:px-10">
                    <AppSidebarHeader breadcrumbs={breadcrumbs} />
                    <div className="mt-6 flex flex-1 flex-col gap-6 sm:gap-8">
                        <ImpersonationBanner />
                        <JabesWomenBanner />
                        <TwoFactorSuggestionBanner />
                        {children}
                    </div>
                </div>
            </AppContent>
        </AppShell>
    );
}