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

const KPI_CONFIG = [
  { key: 'tickets_open', label: 'CH / tickets abertos', to: '/chamados', variant: 'blue' },
  { key: 'tickets_escalated', label: 'Escalados', to: '/chamados', variant: 'amber' },
  { key: 'wazuh_high', label: 'Wazuh L12+', to: '/discover?bucket=high', variant: 'red', compute: (s, alerts) => (alerts?.high || 0) + (alerts?.critical || 0) },
  { key: 'webhook_events', label: 'Eventos 48h', to: '/discover', variant: 'slate', compute: (s) => s.webhook_events ?? '—' },
]

export default function KpiBar({ summary, alertCounts }) {
  return (
    <div className="kpi-bar" role="region" aria-label="Indicadores operacionais">
      {KPI_CONFIG.map(({ key, label, to, variant, compute }) => {
        const value = compute ? compute(summary, alertCounts) : (summary?.[key] ?? '—')
        return (
          <Link key={key} to={to} className={`kpi-card kpi-card--${variant}`} title={label}>
            <span className="kpi-value">{value}</span>
            <span className="kpi-label">{label}</span>
          </Link>
        )
      })}
    </div>
  )
}
