import { Link } from '@inertiajs/react';

import { Separator } from '@radix-ui/react-separator';

import { AppSidebar } from '@/components/ui/app-sidebar';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { Toaster } from '@/components/ui/toaster';

export default function AppLayout({ auth, header, children, toolbar }) {
    return (
        <SidebarProvider>
            <AppSidebar auth={ auth } />
            <SidebarInset>
                <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                    <SidebarTrigger className="-ml-1" />
                    <Separator orientation="vertical" className="mr-2 h-4" />
                    <Breadcrumb>
                        <BreadcrumbList>
                            <BreadcrumbItem className="hidden lg:block">
                                <BreadcrumbLink asChild>
                                    <Link href={ route('comics.index') }>Home</Link>
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            { header }
                        </BreadcrumbList>
                    </Breadcrumb>
                    <span className="flex gap-1 ml-auto justify-center content-center">
                        { toolbar }
                    </span>
                </header>
                <div className="w-full pt-3">
                    { children }
                    <Toaster />
                </div>
            </SidebarInset>
        </SidebarProvider>
    );
}