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

import { Link, useLocation } from 'react-router-dom'
import { useProgramScope } from '../context/ProgramScopeContext.jsx'
import { initiativeCatalogPath, projectPath, scopedPath } from '../utils/routes.js'
import {
  resolveInitiativeHub,
  resolvePortfolioHub,
} from '../utils/scopeNavigation.js'

export function ProgramScopeBar() {
  const location = useLocation()
  const {
    initiativeId,
    projectId,
    initiativeTitle,
    projectTitle,
    clearScope,
    setScope,
  } = useProgramScope()

  const portfolioTo = resolvePortfolioHub(location.pathname)
  const initiativeTo = initiativeId
    ? resolveInitiativeHub(location.pathname, initiativeId, scopedPath)
    : null

  return (
    <div className="program-scope-bar" aria-label="Programm-Scope">
      <span className="program-scope-bar__label">Scope</span>
      <nav className="program-scope-bar__trail">
        <Link
          to={portfolioTo}
          className={
            'program-scope-bar__crumb' +
            (!initiativeId ? ' program-scope-bar__crumb--active' : '')
          }
          onClick={() => clearScope()}
        >
          Portfolio
        </Link>
        {initiativeId && initiativeTo && (
          <>
            <span className="program-scope-bar__sep" aria-hidden="true">
              ›
            </span>
            <Link
              to={initiativeTo}
              className={
                'program-scope-bar__crumb' +
                (!projectId ? ' program-scope-bar__crumb--active' : '')
              }
              onClick={() => setScope({ projectId: '', clearProject: true })}
            >
              {initiativeTitle || 'Vorhaben'}
            </Link>
          </>
        )}
        {projectId && (
          <>
            <span className="program-scope-bar__sep" aria-hidden="true">
              ›
            </span>
            <Link
              to={projectPath(projectId)}
              className="program-scope-bar__crumb program-scope-bar__crumb--active"
            >
              {projectTitle || 'Projekt'}
            </Link>
          </>
        )}
      </nav>
      <Link to={initiativeCatalogPath()} className="program-scope-bar__catalog link-inline">
        Vorhaben-Katalog
      </Link>
    </div>
  )
}