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

const TABS = [
  { to: '', label: 'Steuerung', end: true },
  { to: 'plan', label: 'Zielzustände' },
  { to: 'execution', label: 'Ausführung' },
  { to: 'inbox', label: 'Eingang' },
  { to: 'journey', label: 'Nachvollziehbarkeit' },
]

export function InitiativeSubNav() {
  const { id } = useParams()
  const base = `/initiatives/${id}`

  return (
    <nav className="initiative-subnav" aria-label="Vorhaben-Bereiche">
      {TABS.map((tab) => (
        <NavLink
          key={tab.to || 'overview'}
          to={tab.to ? `${base}/${tab.to}` : base}
          end={tab.end}
          className={({ isActive }) =>
            `initiative-subnav-link${isActive ? ' initiative-subnav-link--active' : ''}`
          }
        >
          {tab.label}
        </NavLink>
      ))}
    </nav>
  )
}