import React from 'react'
import { MenuNavBarItem } from '../interfaces'
import NavBarItem from './NavBarItem'
import {useAppSelector} from "../stores/hooks";
import {hasPermission} from "../helpers/userPermissions";

type Props = {
  menu: MenuNavBarItem[]
}

export default function NavBarMenuList({ menu }: Props) {
  const { currentUser } = useAppSelector((state) => state.auth);

  if (!currentUser) return null;

  return (
    <>
      {menu.map((item, index) => {
        if (!hasPermission(currentUser, item.permissions)) return null;

        return (
          <div key={index}>
            <NavBarItem  item={item} />
          </div>
        )
      })}
    </>
  )
}