import { useState } from "react";
import { Link } from "react-router-dom";
import { ItemProps } from ".";
import MenuSubHeader from "./MenuSubHeader";

const MenuMainHeader = (props: ItemProps) => {
  const [isHover, setIsHover] = useState(false);
  return (
    <section
      className="tmpl-mainmenu"
      onMouseEnter={() => {
        setIsHover(true);
      }}
      onMouseLeave={() => {
        setIsHover(false);
      }}
    >
      {props.displayType === "IMAGE" ? (
        <img
          alt="No Image"
          src={props.label}
          onClick={() => props.onNavigate(props.path, props.navigationType)}
        />
      ) : (
        <h2 onClick={() => props.onNavigate(props.path, props.navigationType)}>
          <Link to={props.path}>{props.label}</Link>
        </h2>
      )}
      <div className={`tmpl-mainmenu__items ${isHover ? "visible" : ""}`}>
        {props.subItems.map((item, index) => (
          <MenuSubHeader {...item} key={index} onNavigate={props.onNavigate} />
        ))}
      </div>
    </section>
  );
};
export default MenuMainHeader;