import { AppContent } from '@/components/layout/app-content';
import { AppShell } from '@/components/layout/app-shell';
import { AdminSidebar } from '@/components/layout/admin-sidebar';
import { AppSidebarHeader } from '@/components/layout/app-sidebar-header';
import { Toaster } from '@/components/ui/toaster';
import { toast } from 'sonner';
import { Flash, type BreadcrumbItem } from '@/types';
import { usePage } from '@inertiajs/react';
import { useEffect, type PropsWithChildren } from 'react';

export default function AdminSidebarLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
    // Ambil flash message dari Inertia props
    const { flash } = usePage().props as { flash?: Flash };

    // Tampilkan toast jika ada pesan flash
    useEffect(() => {
        if (flash?.success) toast.success(flash.success);
        if (flash?.error) toast.error(flash.error);
        if (flash?.info) toast.info(flash.info);
        if (flash?.warning) toast.warning(flash.warning);
    }, [flash]);

    return (
        <AppShell variant="sidebar">
            <AdminSidebar />
            <AppContent variant="sidebar">

                {/* notify component */}
                <Toaster />

                <AppSidebarHeader breadcrumbs={breadcrumbs} />
                <div className="flex flex-1 flex-col p-4 md:p-6">
                    {children}
                </div>
            </AppContent>
        </AppShell>
    );
}