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

export default function Overview() {
  return (
    <>
      <h2>Overview</h2>
      <p style={{ color: 'var(--lb-text-secondary)' }}>Porta de entrada — métricas e chamados recentes (mock MVP)</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(140px,1fr))', gap: '0.75rem' }}>
        {[
          ['Chamados abertos', '2'],
          ['Wazuh L10+', '1'],
          ['Onboard activo', '1'],
        ].map(([label, val]) => (
          <div key={label} className="card">
            <div style={{ fontSize: '0.75rem', color: 'var(--lb-text-muted)' }}>{label}</div>
            <strong style={{ fontSize: '1.5rem' }}>{val}</strong>
          </div>
        ))}
      </div>
      <div className="card">
        <h3 style={{ marginTop: 0 }}>Chamados recentes</h3>
        <ul className="timeline">
          {MOCK_CHAMADOS.map((c) => (
            <li key={c.public_id}>
              <Link to={`/chamados/${c.public_id}`}>{c.public_id}</Link> — {c.domain}{' '}
              {c.max_severity ? <span className="badge badge-sev-high">L{c.max_severity}</span> : null}
            </li>
          ))}
        </ul>
      </div>
    </>
  )
}
