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

const MenuSubHeader = (props: ItemProps) => {
  return (
    <section className="tmpl-submenu">
      {props.label &&
        (props.displayType === "IMAGE" ? (
          <img
            alt="No Image"
            src={props.label}
            onClick={() => props.onNavigate(props.path, props.navigationType)}
          />
        ) : (
          <h5
            onClick={() => props.onNavigate(props.path, props.navigationType)}
          >
            <Link to={props.path}>{props.label}</Link>
          </h5>
        ))}
      <div className="tmpl-submenu__items">
        {props.subItems.map((item, index) => (
          <MenuSubItem {...item} key={index} onNavigate={props.onNavigate} />
        ))}
      </div>
    </section>
  );
};
export default MenuSubHeader;