"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;
    onToggleMobileMenu: () => void;
    onToggleSearch: () => void;
    menuItems: any[];
    isLoading: boolean;
}

const HeaderBottom: React.FC<HeaderBottomProps> = ({
    onToggleOffcanvas,
    onToggleMobileMenu,
    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">
                                {/* Mobile Search Icon - visible on mobile only */}
                                <button
                                    onClick={onToggleSearch}
                                    className="main-header__search search-toggler mobile-search-icon"
                                >
                                    <i className="fa-regular fa-magnifying-glass"></i>
                                </button>

                                {/* Desktop Search Icon - hidden on mobile */}
                                <button
                                    onClick={onToggleSearch}
                                    className="main-header__search search-toggler desktop-search-icon"
                                >
                                    <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>

                                {/* Mobile Hamburger - visible on mobile only */}
                                <div className="header__hamburger my-auto mobile-hamburger">
                                    <div
                                        className="sidebar__toggle"
                                        onClick={onToggleMobileMenu}
                                        style={{ cursor: "pointer" }}
                                    >
                                        <i className="fa-solid fa-bars"></i>
                                    </div>
                                </div>

                                {/* Desktop Hamburger - hidden on mobile */}
                                <div className="header__hamburger my-auto desktop-hamburger">
                                    <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;