'use client';

import Link from 'next/link';
import HeaderMenu from './HeaderMenu';

import headerData from './header.json';



// Map the JSON data to satisfy the HeaderMenu props interface
interface JsonMenuItem {
    label: string;
    href: string;
    children?: JsonMenuItem[];
}

interface MenuItem {
    label: string;
    href: string;
    submenu?: MenuItem[];
    megaMenuContent?: React.ReactNode;
}

// We need to recursively map 'children' to 'submenu'
const mapMenuItems = (items: JsonMenuItem[]): MenuItem[] => {
    return items.map(item => {
        const newItem: MenuItem = {
            label: item.label,
            href: item.href,
        };



        if (item.children && item.children.length > 0) {
            newItem.submenu = mapMenuItems(item.children);
        }

        return newItem;
    });
};

const menuItems: MenuItem[] = mapMenuItems(headerData.menu as JsonMenuItem[]);

interface HeaderBottomProps {
    onToggleOffcanvas: () => void;
    onToggleSearch: () => void;
}

const HeaderBottom: React.FC<HeaderBottomProps> = ({ onToggleOffcanvas, onToggleSearch }) => {
    return (
        <header id="header-sticky" className="header-1">
            <div className="container-fluid">
                <div className="mega-menu-wrapper">
                    <div className="header-main">
                        <div className="header-left">
                            <div className="logo">
                                <Link href="/" className="header-logo-2">
                                    <img src="/assets/img/logo/black-logo.svg" alt="logo-img" />
                                </Link>
                            </div>
                            <div className="mean__menu-wrapper">
                                <HeaderMenu menuItems={menuItems} />
                            </div>
                        </div>
                        <div className="header-right d-flex align-items-center mt-0">
                            <div className="header-call-item">
                                <button 
                                    onClick={onToggleSearch} 
                                    className="main-header__search search-toggler"
                                >
                                    <i className="fa-regular fa-magnifying-glass"></i>
                                </button>
                                <Link href="/contact" className="theme-btn">
                                    Apply now
                                    <i className="fa-solid fa-arrow-right"></i>
                                </Link>
                                <div className="header__hamburger my-auto">
                                    <div 
                                        className="sidebar__toggle" 
                                        onClick={onToggleOffcanvas}
                                        style={{ cursor: 'pointer' }}
                                    >
                                        <i className="fa-solid fa-bars-staggered"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
};

export default HeaderBottom;