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

const DeepMenu = ({ name, link, target, subMenus, activeMenu, onMenuClick }) => {
  return (
      <>
          {subMenus ? (
              <a
                  className={`nav-link collapsed ${activeMenu === name ? 'active' : ''}`}  // Menambahkan kelas 'active' pada DeepMenu
                  href="#"
                  data-bs-toggle="collapse"
                  data-bs-target={`#${target}`}  // Menggunakan target untuk menghubungkan dengan collapse
                  aria-expanded="false"
                  aria-controls={target}  // Memastikan ID yang sesuai digunakan untuk kontrol collapse
                  onClick={() => onMenuClick(name)}  // Menangani klik pada DeepMenu
              >
                  {name}
                  <div className="sb-sidenav-collapse-arrow">
                      <i className="fas fa-angle-down"></i>
                  </div>
              </a>
          ) : (
              <a
                  className={`nav-link ${activeMenu === name ? 'active' : ''}`}  // Menambahkan kelas 'active' pada DeepMenu
                  href={link}
                  onClick={() => onMenuClick(name)}  // Menangani klik pada DeepMenu
              >
                  {name}
              </a>
          )}

          {subMenus && (
              <div className="collapse" id={target}>
                  <nav className="sb-sidenav-menu-nested nav">
                      {subMenus.map((deepSubMenu, index) => (
                          <DeeperMenu
                              key={index}
                              {...deepSubMenu}
                              activeMenu={activeMenu}  // Menyediakan state activeMenu ke DeeperMenu
                              onMenuClick={onMenuClick}  // Fungsi untuk menangani klik
                          />
                      ))}
                  </nav>
              </div>
          )}
      </>
  );
};

export default DeepMenu;
