uldp.edu.vn/app/components/layout/Header/HeaderMenu.tsx

import Link from 'next/link';

interface MenuItem {
    label: string;
    href: string;
    submenu?: MenuItem[];
    isMegaMenu?: boolean; // For Home demo images if needed, though simple recursion handles most
    megaMenuContent?: React.ReactNode; // Flexible slot for complex mega menus
}

interface HeaderMenuProps {
    menuItems: MenuItem[];
}

const HeaderMenu: React.FC<HeaderMenuProps> = ({ menuItems }) => {
    return (
        <div className="main-menu">
            <nav id="mobile-menu">
                <ul>
                    {menuItems.map((item, index) => (
                        <li key={index} className={`${item.submenu || item.megaMenuContent ? 'has-dropdown' : ''} ${item.href === 'index.html' ? 'active menu-thumb' : ''}`}>
                             <Link href={item.href} className={item.href === 'index.html' ? '' : 'border-none'}>
                                {item.label}
                                {(item.submenu || item.megaMenuContent) && <i className="fas fa-angle-down"></i>} 
                             </Link>
                             
                             {/* Standard Submenu */}
                             {item.submenu && !item.megaMenuContent && (
                                <ul className="submenu">
                                    {item.submenu.map((subItem, subIndex) => (
                                        <li key={subIndex} className={subItem.submenu ? 'has-dropdown' : ''}>
                                            <Link href={subItem.href}>
                                                {subItem.label}
                                                {subItem.submenu && <i className="fas fa-angle-right"></i>}
                                            </Link>
                                            {subItem.submenu && (
                                                <ul className="submenu">
                                                     {subItem.submenu.map((nestedItem, nestedIndex) => (
                                                         <li key={nestedIndex}>
                                                             <Link href={nestedItem.href}>{nestedItem.label}</Link>
                                                         </li>
                                                     ))}
                                                </ul>
                                            )}
                                        </li>
                                    ))}
                                </ul>
                             )}

                             {/* Custom Mega Menu (like Home) */}
                             {item.megaMenuContent && (
                                 <ul className="submenu has-homemenu">
                                     <li>
                                         <div className="homemenu-items">
                                             {item.megaMenuContent}
                                         </div>
                                     </li>
                                 </ul>
                             )}
                        </li>
                    ))}
                </ul>
            </nav>
        </div>
    );
};

export default HeaderMenu;