import { useState, useEffect, useRef, ReactNode } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { TopNavBar } from '@web/src/components/layout/main/top-nav-bar';
import { navItems, notificationItems } from '@web/src/components/layout/main/nav-data';
import { Sidebar } from '@web/src/components/layout/main/side-bar';
import { Outlet } from 'react-router-dom';


export function MainLayout() {
    const [sidebarOpen, setSidebarOpen] = useState(true);
    const [notifications, setNotifications] = useState(3);
    const [recentSearches] = useState([
        'React Fundamentals',
        'TypeScript Advanced',
        'Tailwind CSS Projects',
    ]);

    return (
        <div className="min-h-screen bg-gray-50">
            <TopNavBar
                sidebarOpen={sidebarOpen}
                setSidebarOpen={setSidebarOpen}
                notifications={notifications}
                notificationItems={notificationItems}
                recentSearches={recentSearches}
            />

            <AnimatePresence mode="wait">
                {sidebarOpen && <Sidebar navItems={navItems} />}
            </AnimatePresence>

            <main
                className={`pt-16 min-h-screen transition-all duration-300 ${sidebarOpen ? 'ml-64' : 'ml-0'
                    }`}
            >
                <Outlet></Outlet>
            </main>
        </div>
    );
}