import { Suspense, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Sidebar } from './Sidebar';
import { Header } from './Header';

const ContentSkeleton = () => (
    <div className="space-y-6">
        <div className="h-10 w-1/3 rounded-lg bg-gray-200 dark:bg-gray-800 animate-pulse" />
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {[...Array(3)].map((_, index) => (
                <div
                    key={index}
                    className="h-36 rounded-lg bg-white dark:bg-gray-800 shadow-sm"
                >
                    <div className="h-full w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse" />
                </div>
            ))}
        </div>
        <div className="h-96 rounded-lg bg-white dark:bg-gray-800 shadow-sm">
            <div className="h-full w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse" />
        </div>
    </div>
);

export const Layout = () => {
    const [sidebarOpen, setSidebarOpen] = useState(false);

    return (
        <div className="flex h-screen bg-gray-50 dark:bg-gray-900 overflow-hidden">
            <Sidebar
                isOpen={sidebarOpen}
                onClose={() => setSidebarOpen(false)}
            />

            <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
                <Header onMenuClick={() => setSidebarOpen(true)} />

                <main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">
                    <div className="min-h-full py-6 px-4 sm:px-6 lg:px-8">
                        <Suspense fallback={<ContentSkeleton />}>
                            <Outlet />
                        </Suspense>
                    </div>
                </main>
            </div>
        </div>
    );
}; 