import React, {useState} from 'react';
import menuItems from '@/data/menuItems';
import {Link} from "react-router-dom";
import {IMAGE_PREFIX} from "@/constants";

const Header = () => {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  return (
    <header className="fixed top-0 left-0 right-0 flex items-center h-20 w-full bg-white z-30">
      <article
        id="sidebar-dimmer"
        className={`fixed top-20 left-0 w-full h-full transition-opacity duration-500 ease-in-out ${activeIndex !== null ? 'bg-black/50 opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
      />

      {/* 로고 영역 */}
      <Link
        to="/"
        onClick={() => setActiveIndex(null)}
        className="absolute left-[40px] top-[26px] flex items-center gap-1 w-32"
      >
        <img className="w-10 h-7" src={`${IMAGE_PREFIX}/logo.png`} alt="logo"/>
        <div className="text-gray-600 text-xl font-bold font-['Inter']">반도산전</div>
      </Link>

      {/* 메뉴 영역 */}
      <nav className="flex justify-center items-center w-full h-full">
        {menuItems.map((item, index) => (
          <div
            key={index}
            className="relative flex flex-col items-center px-[3vw] cursor-pointer"
            onMouseEnter={() => setActiveIndex(index)}
          >
            <div
              className={`relative group font-bold font-['Inter'] cursor-pointer ${activeIndex === index ? 'text-blue-600' : 'text-gray-600'}`}>
              {item.label}
              <span
                className={`absolute left-0 bottom-[-2px] h-[2px] bg-blue-600 transition-all duration-300 ${activeIndex === index ? 'w-full' : 'w-0'}`}></span>
            </div>

            {activeIndex === index && item.children.length > 0 && (
              <div
                id="overlab-menu"
                className="absolute flex flex-col space-y-6 mt-13 pt-4 z-10 bg-blue-900 text-white cursor-pointer"
              >
                {item.children.map((child, cIdx) => (
                  <Link
                    to={`${item.href}/${child.href}`}
                    key={cIdx}
                    className="relative inline-block text-md text-center font-medium font-['Inter'] text-white whitespace-normal max-w-[100px] break-words hover:text-white/80 transition-colors duration-200 group"
                    onClick={() => setActiveIndex(null)}
                  >
                    <span className="relative inline-block">
                      {child.label}
                      <span
                        className="absolute left-0 bottom-[-2px] h-[2px] w-0 bg-white transition-all duration-300 group-hover:w-full"></span>
                    </span>
                  </Link>
                ))}
              </div>
            )}
          </div>
        ))}
      </nav>

      {activeIndex !== null && (
        <div id="menuBox" className="absolute w-full h-[50vh] top-20 border bg-blue-900"
             onMouseLeave={() => setActiveIndex(null)}></div>
      )}
    </header>
  );
};

export default Header;