import { usePage } from '@inertiajs/react';
import { LangDebugBanner } from '@/components/lang-debug-banner';
import { LocaleRoot } from '@/components/locale-root';
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
import { resolveDynamicBreadcrumbs } from '@/lib/breadcrumbs';
import type { BreadcrumbItem } from '@/types';

export default function AppLayout({
    breadcrumbs = [],
    children,
}: {
    breadcrumbs?: BreadcrumbItem[];
    children: React.ReactNode;
}) {
    const page = usePage();
    const pathname = new URL(
        page.url,
        typeof window !== 'undefined' ? window.location.origin : 'http://localhost',
    ).pathname;
    const dynamicBreadcrumbs = resolveDynamicBreadcrumbs(pathname, page.props as Record<string, unknown>);

    return (
        <LocaleRoot>
            <AppLayoutTemplate breadcrumbs={breadcrumbs.length > 0 ? breadcrumbs : dynamicBreadcrumbs}>
                {children}
            </AppLayoutTemplate>
            <LangDebugBanner />
        </LocaleRoot>
    );
}