import "../MenuDropdown/menudropdown.css";
import DropdownArrayList from "../../../../array/TopnavbarArrayList.jsx/DropdownArrayList";
import { NavLink } from "react-router-dom";
/**
 * Component for displaying a dropdown menu. in Navbar component.
 * @param {object} props - Component props.
 * @param {object} props.userroles - User roles and eligibility data.
 * @param {boolean} props.showLogoutMOdal - Boolean indicating whether to show the logout modal.
 * @param {Function} props.setShowLogoutModal - Function to toggle the logout modal.
 * @param {boolean} props.dropDownModal - Boolean indicating whether the dropdown menu is open.
 * @param {Function} props.setDropDownModal - Function to toggle the dropdown menu.
 * @returns {JSX.Element} - Rendered component.
 */
const MenuDropDown = ({
  userroles,
  showLogoutMOdal,
  setShowLogoutModal,
  dropDownModal,
  setDropDownModal,
}) => {
  return (
    <>
      <div
        className={dropDownModal ? "modal_overlay" : ""}
        onClick={() => setDropDownModal(false)}
      />
      <div className="menu_dropdown">
        {DropdownArrayList.map((dat, i) => {
          return (
            <NavLink
              to={
                dat.name == "My Details"
                  ? userroles?.is_eligible == true
                    ? dat?.navigate_to
                    : `/dashboard/shareholderdetails/`
                  : dat?.navigate_to
              }
              key={i}
              onClick={() => setDropDownModal(false)}
            >
              <div className="dropdown_menu_itme">
                <div className="left_dropdown_menu">
                  <ion-icon name={dat?.left_icon}></ion-icon>
                  <p>{dat?.name}</p>
                </div>
              </div>
            </NavLink>
          );
        })}
        <NavLink>
          <div
            className="logout_div dropdown_menu_itme"
            onClick={() => setShowLogoutModal(!showLogoutMOdal)}
          >
            <div className="left_dropdown_menu">
              <ion-icon name="log-out-outline"></ion-icon>
              <p>Log out</p>
            </div>
          </div>
        </NavLink>
      </div>
    </>
  );
};

export default MenuDropDown;