"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;
    logo: { light: string; dark: string; alt: string } | null;
}

const HeaderBottom: React.FC<HeaderBottomProps> = ({
    onToggleOffcanvas,
    onToggleMobileMenu,
    onToggleSearch,
    menuItems,
    isLoading,
    logo,
}) => {
    // Helper function to resolve logo URL
    const getLogoUrl = (path: string | undefined) => {
        if (!path) return "/assets/img/logo/black-logo.svg";
        if (path.startsWith("http")) return path;
        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
        return `${apiUrl}${path}`;
    };

    const logoSrc = getLogoUrl(logo?.light);

    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={logoSrc} 
                                        alt={logo?.alt || "logo-img"} 
                                        style={{ maxHeight: "4rem" }}
                                    />
                                </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;