import { Link } from 'react-router-dom'
import { MOCK_EVENTS } from '../mock'

export default function Discover() {
  return (
    <>
      <h2>Discover</h2>
      <p style={{ color: 'var(--lb-text-secondary)' }}>Feed unificado — click abre hub CH-* (≤ 2 cliques)</p>
      <div className="card" style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
          <thead>
            <tr style={{ textAlign: 'left', color: 'var(--lb-text-muted)' }}>
              <th>ID</th><th>Origem</th><th>Evento</th><th>Domínio</th><th>Sev</th><th>Chamado</th>
            </tr>
          </thead>
          <tbody>
            {MOCK_EVENTS.map((e) => (
              <tr key={e.id} style={{ borderTop: '1px solid var(--lb-border)' }}>
                <td>{e.id}</td>
                <td><span className={`badge badge-${e.source}`}>{e.source}</span></td>
                <td>{e.event_type}</td>
                <td>{e.domain}</td>
                <td>{e.severity ?? '—'}</td>
                <td>
                  {e.chamado_public_id ? (
                    <Link to={`/chamados/${e.chamado_public_id}`}>{e.chamado_public_id}</Link>
                  ) : '—'}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  )
}
