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 { SyncCompanyCurrency } from '@/components/sync-company-currency';
import type { AppLayoutProps } from '@/types';
import { motion, AnimatePresence } from 'framer-motion';
import { usePage } from '@inertiajs/react';

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

    return (
        <AppShell variant="sidebar">
            <SyncCompanyCurrency />
            <AppSidebar />
            <AppContent variant="sidebar" className="overflow-x-hidden">
                <AppSidebarHeader breadcrumbs={breadcrumbs} />
                <AnimatePresence mode="wait">
                    <motion.div 
                        key={component}
                        initial={{ opacity: 0, y: 15 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -15 }}
                        transition={{ duration: 0.4, ease: 'easeOut' }}
                        className="flex-1 flex flex-col w-full h-full"
                    >
                        {children}
                    </motion.div>
                </AnimatePresence>
            </AppContent>
        </AppShell>
    );
}