"use client";

import { useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { headerData } from "@/data/shared/headerData";

export default function Header() {
  const { logo, navItems, searchIcon, ctaButton } = headerData;
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      const header = document.querySelector(".header-main");
      if (window.scrollY > 100) {
        header?.classList.add("sticky");
      } else {
        header?.classList.remove("sticky");
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const toggleMobileMenu = () => {
    document.querySelector(".mobile-menu")?.classList.toggle("active");
    document.querySelector(".menu-overlay")?.classList.toggle("active");
  };

  const toggleSearch = (e: React.MouseEvent) => {
    e.preventDefault();
    document.querySelector(".search-popup")?.classList.toggle("active");
    document.querySelector(".search-overlay")?.classList.toggle("active");
  };

  return (
    <header className="header-main">
      <div className="carousel-container">
        <div className="header-bottom">
          <div className="row">
            <div className="col-lg-2 col-md-6 col-sm-6">
              <div className="header-logo">
                <Link href={logo.href} className="logo" title="Home">
                  <Image
                    src={logo.src}
                    alt={logo.alt}
                    width={127}
                    height={30}
                    priority
                  />
                </Link>
                <Link href={logo.href} title="Home">
                  <Image
                    src={logo.darkSrc}
                    alt={logo.darkAlt}
                    width={127}
                    height={30}
                    priority
                  />
                </Link>
              </div>
            </div>
            <div className="col-lg-7">
              <nav
                className="main-menu11 menu-style11"
                aria-label="Main Navigation"
              >
                <ul>
                  {navItems.map((item) => (
                    <li
                      key={item.label}
                      className={pathname === item.href ? "active" : ""}
                    >
                      <Link
                        href={item.href}
                        className={pathname === item.href ? "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={toggleSearch}
                >
                  <Image
                    src={searchIcon}
                    alt="Search Icon"
                    width={25}
                    height={25}
                  />
                </a>
                <a href={ctaButton.href} className="sign-btn menu-btn">
                  {ctaButton.label}
                </a>
                <button
                  className="hamburger-btn"
                  aria-label="Toggle Menu"
                  onClick={toggleMobileMenu}
                >
                  <span />
                  <span />
                  <span />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}