import { NavLink } from 'react-router-dom'
import { TreePine, FolderTree, Download, Grid3x3, Users, Images } from 'lucide-react'

/**
 * Admin-Seiten-Navigation (horizontal)
 * Wechselt zwischen verschiedenen Admin-Seiten
 */
export default function AdminPageNav() {
  const pages = [
    { to: '/admin/hierarchy', label: 'Hierarchie', icon: TreePine },
    { to: '/admin/users', label: 'Nutzer', icon: Users },
    { to: '/admin/maturity-models', label: 'Fähigkeitsmatrix', icon: Grid3x3 },
    { to: '/admin/catalogs', label: 'Kataloge', icon: FolderTree },
    { to: '/media', label: 'Medien', icon: Images },
    { to: '/admin/mediawiki-import', label: 'Wiki-Import', icon: Download }
  ]

  return (
    <nav className="admin-top-nav" aria-label="Administration">
      {pages.map((page) => {
        const Icon = page.icon
        return (
          <NavLink
            key={page.to}
            to={page.to}
            className={({ isActive }) =>
              'admin-top-nav__link' + (isActive ? ' admin-top-nav__link--active' : '')
            }
          >
            <Icon size={18} strokeWidth={2} aria-hidden />
            <span>{page.label}</span>
          </NavLink>
        )
      })}
    </nav>
  )
}