import type {MenuItem} from "./MenuList.tsx";

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) => {
                    return item.upperNo === menuItem.no ? (
                        <li key={index} value={item.url}>
                            <a>{item.name}</a>
                        </li>
                    ) : null;
                })}
            </ul>
        </li>
    );
}