import { NotificationsDropdown } from './notifications-dropdown';
import { SearchBar } from './search-bar';
import { UserMenuDropdown } from './usermenu-dropdown';
import { Bars3Icon } from '@heroicons/react/24/outline';

interface TopNavBarProps {
    sidebarOpen: boolean;
    setSidebarOpen: (open: boolean) => void;
    notifications: number;
    notificationItems: Array<any>;
    recentSearches: string[];
}
export function TopNavBar({
    sidebarOpen,
    setSidebarOpen,
    notifications,
    notificationItems,
    recentSearches
}: TopNavBarProps) {
    return (
        <nav className="fixed top-0 left-0 right-0 h-16 bg-white shadow-sm z-50">
            <div className="flex items-center justify-between h-full px-4">
                <div className="flex items-center gap-4">
                    <button
                        onClick={() => setSidebarOpen(!sidebarOpen)}
                        className="p-2 rounded-lg hover:bg-gray-100 transition-colors">
                        <Bars3Icon className='w-5 h-5' />
                    </button>
                    <h1 className="text-xl font-semibold text-slate-800 tracking-wide">
                        fhmooc
                    </h1>
                </div>

                <SearchBar recentSearches={recentSearches} />

                <div className="flex items-center gap-4">
                    <NotificationsDropdown
                        notifications={notifications}
                        notificationItems={notificationItems}
                    />
                    <UserMenuDropdown />
                </div>
            </div>
        </nav>
    );
}