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

export default function IncidentsStrip({ incidents }) {
  if (!incidents?.length) return null

  return (
    <section className="wz-section">
      <h2 className="wz-section-title">Incidentes abertos (Agentic Ops)</h2>
      <div className="incident-list">
        {incidents.map((inc) => (
          <Link
            key={inc.id || inc.scenario_id}
            to="/chamados"
            className={`incident-card incident-card--${inc.severity || 'warn'}`}
          >
            <div>
              <strong>{inc.title}</strong>
              <p>{inc.scenario_id} · {inc.severity} · visto {inc.occurrence_count ?? 1}×</p>
            </div>
            <span className="incident-cta">Investigar →</span>
          </Link>
        ))}
      </div>
      <p className="page-lead" style={{ marginBottom: 0, fontSize: '0.8rem' }}>
        Mission board completo: <a href="https://desk.ligbox.com.br" target="_blank" rel="noreferrer">desk.ligbox.com.br</a> (migra para /ops/agentic)
      </p>
    </section>
  )
}
