import { NavLink, useLocation } from 'react-router-dom'
import { getAppNavItems, isNavItemActive } from '../config/appNav.js'

export function BottomNav({ capabilities }) {
  const loc = useLocation()
  const items = getAppNavItems(capabilities)

  return (
    <nav className="bottom-nav" aria-label="Hauptnavigation">
      {items.map((item) => (
        <NavLink
          key={item.key}
          to={item.to}
          end={!!item.end}
          className={({ isActive }) =>
            isNavItemActive(loc.pathname, item, isActive) ? 'nav-item active' : 'nav-item'
          }
        >
          <item.Icon size={22} strokeWidth={2} aria-hidden />
          <span>{item.shortLabel}</span>
        </NavLink>
      ))}
    </nav>
  )
}