import { NavLink } from "react-router-dom";

import { menuGroups } from "@/config/menu";

interface MenuListProps {
    onNavigate?: () => void;
}

const MenuList = ({ onNavigate }: MenuListProps) => {
    return (
        <nav
            className="portal-menu d-flex flex-column"
            aria-label="Portal navigation"
        >
            {menuGroups.map((group) => (
                <section className="portal-menu__group" key={group.title}>
                    <h2>{group.title}</h2>

                    <div className="portal-menu__items d-flex flex-column">
                        {group.items.map((item) =>
                            item.path ? (
                                <NavLink
                                    className={({ isActive }) =>
                                        isActive
                                            ? "portal-menu__item is-active d-flex align-items-center gap-3"
                                            : "portal-menu__item d-flex align-items-center gap-3"
                                    }
                                    key={item.id}
                                    onClick={onNavigate}
                                    to={item.path}
                                >
                                    <img
                                        className="portal-menu-icon"
                                        src={item?.icon}
                                        alt=""
                                        aria-hidden="true"
                                    />
                                    <span>{item.label}</span>
                                </NavLink>
                            ) : (
                                <span
                                    className="portal-menu__item d-flex align-items-center gap-3"
                                    key={item.id}
                                >
                                    <img
                                        className="portal-menu-icon"
                                        src={item?.icon}
                                        alt=""
                                        aria-hidden="true"
                                    />
                                    <span>{item.label}</span>
                                </span>
                            ),
                        )}
                    </div>
                </section>
            ))}
        </nav>
    );
};

export default MenuList;