Kairo-Jinkendo/frontend/src/components/ModeAreaNav.jsx

import { NavLink, useLocation } from 'react-router-dom'
import { useProgramScope } from '../context/ProgramScopeContext.jsx'

/**
 * Bereichs-Subnav (Mitai Settings/Admin-Shell).
 *
 * @param {{
 *   modeLabel: string,
 *   items: { key: string, to: string, label: string, labelFor?: (ctx: object) => string }[],
 *   resolveActiveKey?: (pathname: string) => string | null,
 *   showScope?: boolean,
 *   scopeMutedLabel?: string,
 * }} props
 */
export function ModeAreaNav({
  modeLabel,
  items,
  resolveActiveKey,
  showScope = false,
  scopeMutedLabel = 'Portfolio',
}) {
  const location = useLocation()
  const { initiativeId, initiativeTitle, hrefWithScope } = useProgramScope()
  const activeKey = resolveActiveKey?.(location.pathname)

  return (
    <nav className="analysis-split__nav" aria-label={`${modeLabel}-Navigation`}>
      <div className="analysis-split__nav-header">
        <span className="analysis-split__nav-eyebrow">{modeLabel}</span>
        {showScope &&
          (initiativeId ? (
            <p className="analysis-split__nav-scope" title={initiativeTitle || initiativeId}>
              {initiativeTitle || 'Vorhaben'}
            </p>
          ) : (
            <p className="analysis-split__nav-scope analysis-split__nav-scope--muted">
              {scopeMutedLabel}
            </p>
          ))}
      </div>
      <ul className="analysis-split__nav-list">
        {items.map((item) => {
          const label = item.labelFor ? item.labelFor({}) : item.label
          const isActive = activeKey === item.key
          return (
            <li key={item.key}>
              <NavLink
                to={hrefWithScope(item.to)}
                end
                className={({ isActive: routerActive }) =>
                  'analysis-split__nav-link' +
                  (routerActive || isActive ? ' analysis-split__nav-link--active' : '')
                }
              >
                {label}
              </NavLink>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}