import React from 'react';
import DeepMenu from './DeepMenu';

const SubMenu = ({ heading, target, iconClass, subMenus, activeMenu, onMenuClick }) => {
  return (
    <>
      <div className="sb-sidenav-menu-heading">{heading}</div>
      <a
        className={`nav-link collapsed ${activeMenu === heading ? 'active' : ''}`} // Menggunakan kelas active
        href="#"
        data-bs-toggle="collapse"
        data-bs-target={`#${target}`}
        aria-expanded="false"
        aria-controls={target}
        onClick={() => onMenuClick(heading)}  // Memperbarui activeMenu
      >
        <div className="sb-nav-link-icon">
          <i className={iconClass}></i>
        </div>
        {heading}
        <div className="sb-sidenav-collapse-arrow">
          <i className="fas fa-angle-down"></i>
        </div>
      </a>
      <div className="collapse" id={target} aria-labelledby="headingOne">
        <nav className="sb-sidenav-menu-nested nav">
          {subMenus.map((subMenu, index) => (
            <DeepMenu
              key={index}
              {...subMenu}
              activeMenu={activeMenu}
              onMenuClick={onMenuClick}
            />
          ))}
        </nav>
      </div>
    </>
  );
};

export default SubMenu;
