'use client';

import { BarsIcon, XmarkIcon } from '@/components/icons';
import { MENU } from '@/data';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import logo from '@/public/logo-main.png';

interface HeaderProps {
  isOpen: boolean;
  openSidebar: (isOpen: boolean) => void;
}

export const Header = ({ isOpen, openSidebar }: HeaderProps) => {
  const pathname = usePathname();
  const [isPageScrolled, setIsPageScrolled] = useState<boolean>(false);

  useEffect(() => {
    const checkScroll = () => {
      setIsPageScrolled(window.scrollY !== 0);
    };
    window.addEventListener('scroll', checkScroll);
    // NEW: cleanup function
    return () => {
      window.removeEventListener('scroll', checkScroll);
    };
  }, [isPageScrolled]);

  return (
    <header
      className={`${
        isPageScrolled
          ? isOpen
            ? 'bg-transparent p-6'
            : 'bg-[#1A1713] bg-opacity-90 p-2'
          : 'bg-transparent p-6'
      } fixed top-0 right-0 z-20 flex w-full items-center justify-between pl-6 pr-4 md:px-[30px] lg:w-[calc(100vw-280px)] lg:justify-end lg:z-[5] xl:pr-10 transition-all duration-300 ease-in-out`}
    >
      <Link
        href="/"
        onClick={() => openSidebar(false)}
        className="w-[150px] xs:w-full lg:hidden"
      >
        <Image
          src={logo}
          alt="Logo"
          width={220}
          height={49}
          priority
          quality={100}
        />
      </Link>
      <div>
        <ul className="hidden lg:flex items-center">
          {MENU.map(({ id, title, link }) => {
            const isActive = link === pathname;

            return (
              <li key={id}>
                <Link
                  href={link}
                  className={`uppercase py-5 px-2 xl:px-4 2xl:px-5 text-center text-[13px] xl:text-[14px] tracking-wider lg:tracking-widest ${
                    isActive
                      ? 'text-accent font-bold'
                      : 'text-foreground font-semibold '
                  } hover:text-accent hover:font-bold transition-all duration-300 ease-in-out`}
                >
                  {title}
                </Link>
              </li>
            );
          })}
        </ul>
        <button
          onClick={() => openSidebar(!isOpen)}
          className={`flex items-center gap-2 lg:hidden py-5 px-2 bg-transparent hover:text-accent hover:font-bold transition-all duration-300 ease-in-out`}
        >
          {isOpen ? (
            <>
              <XmarkIcon className="w-5 h-5" />
              <span>Close</span>
            </>
          ) : (
            <>
              <BarsIcon className="w-5 h-5" />
              <span>Menu</span>
            </>
          )}
        </button>
      </div>
    </header>
  );
};