"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useMobileMenu } from "@/components/global/MobileMenuContext";
import { useSearchPopup } from "@/components/global/SearchPopupContext";
import { headerData } from "@/data/home/header";

function isActive(href: string, pathname: string) {
  return href === pathname;
}

export default function Header() {
  const { logo, navigation, searchButton, ctaButton, hamburgerAlt } =
    headerData;
  const pathname = usePathname();
  const { toggle } = useMobileMenu();
  const { toggle: toggleSearch } = useSearchPopup();

  return (
    <header className="header-main">
      <div className="header-bottom">
        <div className="container">
          <div className="row">
            <div className="col-lg-3 col-md-6 col-sm-6">
              <div className="header-logo">
                <Link href="/" className="logo" title="Home">
                  <Image
                    src={logo.light}
                    alt={logo.alt}
                    width={156}
                    height={40}
                    className="light"
                  />
                  <Image
                    src={logo.dark}
                    alt={logo.alt}
                    width={156}
                    height={40}
                    className="dark"
                  />
                </Link>
              </div>
            </div>
            <div className="col-lg-6">
              <nav
                className="main-menu11 menu-style11"
                aria-label="Main Navigation"
              >
                <ul>
                  {navigation.map((item) => (
                    <li
                      key={item.href}
                      className={isActive(item.href, pathname) ? "active" : ""}
                    >
                      <Link
                        href={item.href}
                        className={
                          isActive(item.href, pathname) ? "active" : ""
                        }
                      >
                        {item.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </nav>
            </div>
            <div className="col-lg-3 col-md-6 col-sm-6">
              <div className="header-btn">
                <a
                  href="#"
                  className="search-btn"
                  aria-label="Search"
                  onClick={(e) => {
                    e.preventDefault();
                    toggleSearch();
                  }}
                >
                  <Image
                    src={searchButton.icon}
                    alt={searchButton.alt}
                    width={25}
                    height={25}
                  />
                </a>
                <a href={ctaButton.href} className="btn-style1">
                  {ctaButton.label}
                </a>
                <button
                  className="hamburger-btn"
                  aria-label={hamburgerAlt}
                  onClick={toggle}
                >
                  <span />
                  <span />
                  <span />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}