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

const AREAS = [
  {
    to: 'plan',
    title: 'Plan',
    description: 'Meilensteine und Roadmap — überprüfbare Zielpunkte pflegen.',
  },
  {
    to: 'execution',
    title: 'Ausführung',
    description: 'Arbeitspakete, Zuweisungen, Blocker am Objekt.',
  },
  {
    to: 'inbox',
    title: 'Eingang',
    description: 'Backlog triagieren und in Arbeitspakete überführen.',
  },
  {
    to: 'journey',
    title: 'Nachvollziehbarkeit',
    description: 'Entscheidungen, Reviews, Nachweise über die Zeit.',
  },
]

export function InitiativeNavCards({ initiativeId, counts = {} }) {
  return (
    <section className="initiative-nav-cards">
      <h2 className="initiative-nav-cards-title">Pflege & Planung</h2>
      <div className="initiative-nav-cards-grid">
        {AREAS.map((area) => {
          const hint =
            area.to === 'inbox' && counts.backlog
              ? `${counts.backlog} Backlog`
              : area.to === 'execution' && counts.actionsOpen
                ? `${counts.actionsOpen} offen`
                : area.to === 'plan' && counts.milestones
                  ? `${counts.milestones} Meilensteine`
                  : null
          return (
            <Link
              key={area.to}
              to={`/initiatives/${initiativeId}/${area.to}`}
              className="initiative-nav-card card"
            >
              <h3>{area.title}</h3>
              <p className="muted">{area.description}</p>
              {hint && <span className="initiative-nav-card-hint">{hint}</span>}
            </Link>
          )
        })}
      </div>
    </section>
  )
}