import { usePage } from '@inertiajs/react';
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';

export default function AppSidebarLayout({
    children,
    breadcrumbs = [],
}: AppLayoutProps) {
    const { auth } = usePage().props;
    const isAdmin = auth.user?.role === 'admin';

    return (
        <AppShell variant="sidebar">
            <AppSidebar />
            <AppContent
                variant="sidebar"
                className={
                    isAdmin
                        ? 'admin-console min-w-0 overflow-x-clip bg-background font-google text-foreground'
                        : 'min-w-0 overflow-x-clip'
                }
            >
                <AppSidebarHeader breadcrumbs={breadcrumbs} isAdmin={isAdmin} />
                {children}
            </AppContent>
        </AppShell>
    );
}