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

export default function DomainAttention({ rows }) {
  if (!rows?.length) {
    return null
  }

  return (
    <div className="card table-wrap">
      <h3 style={{ marginTop: 0, fontSize: '0.95rem' }}>Domínios com atenção</h3>
      <p style={{ fontSize: '0.82rem', color: 'var(--lb-text-secondary)', marginTop: 0 }}>
        Issues do antigo Overview Desk — clique para abrir chamado ou investigar.
      </p>
      <table className="data-table">
        <thead>
          <tr>
            <th>Domínio</th><th>Tenant</th><th>Check</th><th>Mensagem</th><th>Acção</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={`${r.tenant_id}-${r.domain}-${r.check_id}`}>
              <td><code>{r.domain}</code></td>
              <td>{r.tenant_name}</td>
              <td><code>{r.check_id}</code></td>
              <td>{r.message}</td>
              <td>
                <Link to="/chamados" className="btn" style={{ padding: '0.2rem 0.5rem', fontSize: '0.75rem' }}>
                  Chamados
                </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
