import React from "react";

import type { FC } from "react";

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

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

import { MobileSubMenuItem } from "./MobileSubMenu";

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

export const MobileMenuItem: FC<MenuItem> = ({
  heading,
  icon,
  iconColor,
  menuItemType,
  subMenus,
  isLast,
}) => {

  return (
    <div className="tw-pt-4 tw-px-3 tw-flex tw-flex-col tw-gap-3">
      <div className="tw-p-2 tw-flex tw- tw-gap-3 tw-content-center">
        {icon && (
          <Icon
            id={icon}
            className={cssMerge(menuItemIconStyling({ color: iconColor }))}
            fill="currentColor"
            size={16}
          />
        )}
        {heading && <span className="eyebrow !tw-text-md !tw-text-gray-400">{heading}</span>}
      </div>
      <ul className={cssMerge(mobileMenuItemUnorderedListStyling({isLastUnorderedList: isLast}))}>
        {subMenus && subMenus.map((subMenu, index) => (<MobileSubMenuItem subMenuType={menuItemType} key={index} {...subMenu} />))}
      </ul>
    </div>
  );
};
