import { UserAccountAuthPermListProps } from '../model/types';
import { UserAccountAuthPermItem } from './user-account-auth-perm-item';

export const UserAccountAuthPermList = ({
  mid,
  usrid,
  idCL,
  status,
  menuItems,
  menuGrants,
}: UserAccountAuthPermListProps) => {
  return (
    <div className="perm-list">
      {menuItems.map((item, index) => {
        // 해당 메뉴와 서브메뉴에 대한 권한만 필터링
        const subMenuIds = (item.subMenu ?? []).map(sub => Number(sub.menuId));
        const relevantGrants = (menuGrants ?? []).filter(grant =>
          subMenuIds.includes(grant.menuId)
        );

        return (
          <UserAccountAuthPermItem
            key={`perm-${item.menuId || index}`}
            mid={mid}
            usrid={usrid}
            idCL={idCL}
            status={status}
            menuId={item.menuId}
            menuName={item.menuName ?? ''}
            subMenu={item.subMenu ?? []}
            menuGrants={relevantGrants}
          />
        );
      })}
    </div>
  );
};