import React, { useState } from "react";
import { LowerMenuItem } from "./Header";

interface MenuItemProps {
  item: LowerMenuItem;
}

const HeaderMenuItem: React.FC<MenuItemProps> = ({ item }) => {
  const [showSubMenu, setShowSubMenu] = useState<boolean>(false);

  const toggleSubMenu = () => {
    setShowSubMenu(!showSubMenu);
  };

  return (
    <li
      className={`cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]`}
      onMouseEnter={toggleSubMenu}
      onMouseLeave={toggleSubMenu}
    >
      <a href={item.linkPath}>{item.name}</a>
      {showSubMenu && item.subItems && (
        <ul
          className={`absolute bg-white shadow-md p-4 z-20 `}
        >
          {item.subItems.map((subItem, index) => (
            <HeaderMenuItem key={index} item={subItem} />
          ))}
        </ul>
      )}
    </li>
  );
};

export default HeaderMenuItem;