import React from "react";

import type { FC } from "react";

import {DesktopSubMenuItem} from './DesktopSubMenu'

import { cssMerge } from "../../../../utils/cssMerge";

import { menuItemIconStyling, desktopMenuItemStyling, topLevelMenuItem } from "../header.styles";

import type { MenuItem } from "../../header.types";
import { Icon } from "../../../../molecules/Icon/index";

export const DesktopMenuItem: FC<MenuItem> = ({
  heading,
  icon,
  iconColor,
  menuItemType,
  subMenus,
  isSibling,
}) => {
  return (
    <li className={cssMerge(desktopMenuItemStyling({ variant: menuItemType, isSibling }))}>
      <div className="tw-flex tw-gap-3 tw-items-center">
        {icon && (
          <Icon
            id={icon}
            className={cssMerge(menuItemIconStyling({ color: iconColor }))}
            fill="currentColor"
            size={16}
          />
        )}
        {heading && <span className={topLevelMenuItem()}>{heading}</span>}
      </div>
      <ul className="tw-pl-0 tw-list-none">
        {subMenus && subMenus.map(subMenu => (<DesktopSubMenuItem subMenuType={menuItemType} key={subMenu.title} {...subMenu} />))}
      </ul>
    </li>
  );
};
