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

export function PlanningDebtBanner({ planningDebt, hrefWithScope }) {
  if (!planningDebt?.length || !hrefWithScope) {
    return null
  }

  return (
    <div className="planning-debt-banner" role="status">
      <p className="planning-debt-banner__title">Planung ausstehend</p>
      <ul className="planning-debt-banner__list">
        {planningDebt.map((item) => (
          <li key={item.roadmap_item_id}>
            <strong>{item.title || 'Zielzustand'}</strong>
            <span className="muted"> — {item.message || 'Durchführungsplan fehlt'}</span>
          </li>
        ))}
      </ul>
      <p className="muted planning-debt-banner__hint">
        Lege Arbeitspakete unter dem aktiven Gate an —{' '}
        <Link to={hrefWithScope('/plan/gates')}>Zielzustände</Link>
        {' · '}
        <Link to={hrefWithScope('/plan/work')}>Arbeit</Link>
      </p>
    </div>
  )
}