"use client";

import Image from "next/image";
import { useState, useEffect } from "react";

type HeaderNavItem = {
  id?: string | number;
  label?: string | null;
  href?: string | null;
};

interface Props {
  logoSrc: string | null;
  logoAlt: string;
  navItems: HeaderNavItem[];
}

export default function HeroAnimatedHeader({ logoSrc, logoAlt, navItems }: Props) {
  const [showHeader, setShowHeader] = useState(true);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    let lastY = 0;
    const handleScroll = () => {
      const currentY = window.scrollY;
      setIsScrolled(currentY > 50);
      if (currentY <= 150) {
        setShowHeader(true);
      } else if (currentY > lastY + 5) {
        setShowHeader(false);
      } else if (currentY < lastY - 5) {
        setShowHeader(true);
      }
      lastY = currentY;
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header
      className={`fixed top-0 left-0 z-[100] w-full hidden lg:flex transition-all duration-300 ease-in-out ${
        isScrolled ? "bg-black/80 backdrop-blur-md shadow-lg" : "bg-black/30"
      } ${showHeader ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"}`}
    >
      <div className="flex h-[71px] w-full items-center px-[60px] py-[12px]">
        <div className="flex items-center gap-3">
          <div className="relative h-[25px] w-[72px] shrink-0">
            {logoSrc ? (
              <Image
                src={logoSrc}
                alt={logoAlt}
                fill
                className="object-contain"
                sizes="72px"
                priority
              />
            ) : null}
          </div>
        </div>

        <div className="h-px flex-1" />

        <nav className="hidden shrink-0 items-center gap-[33px] pr-[173px] text-s uppercase tracking-[0.25em] text-white/90 sm:flex">
          {navItems.map((item) => {
            const href = item.href?.trim() || "#";
            const label = item.label?.trim() || "";
            if (!label) return null;
            return (
              <a
                key={String(item.id ?? label)}
                className="transition-colors hover:text-white"
                href={href}
              >
                {label}
              </a>
            );
          })}
        </nav>
      </div>
    </header>
  );
}