'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import HeaderMenu from './HeaderMenu';
import { headerMenuService } from '@/services/header-menu.service';
import { HeaderMenu as HeaderMenuType } from '@/types/header-menu';

interface HeaderBottomProps {
    onToggleOffcanvas: () => void;
    onToggleSearch: () => void;
    menuItems: any[];
    isLoading: boolean;
}

const HeaderBottom: React.FC<HeaderBottomProps> = ({ 
    onToggleOffcanvas, 
    onToggleSearch,
    menuItems,
    isLoading
}) => {
    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">
                                {!isLoading && <HeaderMenu menuItems={menuItems as any} />}
                            </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;