import { NavLink } from 'react-router-dom'

const ITEMS = [
  { to: '/planning', label: 'Trainingsplanung', end: true },
  { to: '/planning/framework-programs', label: 'Rahmenprogramme' },
  { to: '/planning/training-modules', label: 'Trainingsmodule' },
  { to: '/planning/plan-templates', label: 'Vorlagen' },
]

/** Oberste Planungs-Navigation (Chip-Register). */
export default function PlanningRouteNav() {
  return (
    <nav
      className="admin-page-subtabs page-section-nav page-section-nav--wrap planning-route-nav"
      aria-label="Planung"
    >
      {ITEMS.map((item) => (
        <NavLink
          key={item.to}
          to={item.to}
          end={item.end}
          className={({ isActive }) =>
            'admin-page-subtabs__btn' + (isActive ? ' admin-page-subtabs__btn--active' : '')
          }
        >
          <span>{item.label}</span>
        </NavLink>
      ))}
    </nav>
  )
}
