import {Link} from "react-router-dom";
import type {MenuItem} from "./MenuList.tsx";
import {ADMIN_ROUTE_PREFIX} from "../../route/adminRouteMap.ts";

type MenuItemProps = {
    menuItem: MenuItem,
    menuItemList: MenuItem[],
    openedMenuNo: string | null
    onClick: (menuNo: string) => void
}

export const MenuListItem = ({
                                 menuItem,
                                 menuItemList,
                                 openedMenuNo,
                                 onClick,
                             }: MenuItemProps) => {


    return (
        <li className={`depth01 ${openedMenuNo === menuItem.no ? "on" : ""}`} onClick={() => onClick(menuItem.no)}>
            <button className="menu_title">{menuItem.name}</button>
            <ul className="depth02">
                {menuItemList.map((item: MenuItem, index: number) => {
                    const routePath = ADMIN_ROUTE_PREFIX + item.url;

                    return item.upperNo === menuItem.no ? (
                        <li key={index} value={item.url}>
                            <Link to={routePath}>{item.name}</Link>
                        </li>
                    ) : null;
                })}
            </ul>
        </li>
    );
}