import {MenuListItem} from "./MenuListItem.tsx";
import {useState} from "react";

export type MenuItem = {
    no: string;
    name: string;
    url: string;
    upperNo: string;
}

export const MenuList = ({headMenuList, menuList}: { headMenuList: MenuItem[], menuList: MenuItem[] }) => {
    const [openedMenuNo, setOpenedMenuNo] = useState<string | null>(null);
    const handleToggleMenu = (menuNo: string) => {
        setOpenedMenuNo(prev => prev === menuNo ? null : menuNo);
    }

    return (
        <ul className="menu_ul">
            {headMenuList.map((item: MenuItem, index: number) => {
                return (
                    <MenuListItem key={index}
                        menuItem={item}
                        menuItemList={menuList}
                        openedMenuNo = {openedMenuNo}
                        onClick={handleToggleMenu}
                    />
                );
            })}
        </ul>
    )
}