ligbox-ops-platform/specs/019-ops-console-active-operations/deploy/frontend/src/components/AlertBar.jsx

import { Link } from 'react-router-dom'
import { SEVERITY_BUCKETS } from '../lib/severity'

export default function AlertBar({ counts, linkable = true }) {
  return (
    <div className="wz-alerts-bar" role="region" aria-label="Alertas últimas 24 horas">
      {SEVERITY_BUCKETS.map(({ key, label, hint, className }) => {
        const val = counts[key] ?? 0
        const inner = (
          <>
            <strong>{val}</strong>
            <span>{label}</span>
            <span className="wz-alert-hint">{hint}</span>
            {linkable && val > 0 ? (
              <span className="wz-alert-cta">Ver alertas →</span>
            ) : null}
          </>
        )
        if (linkable && val > 0) {
          return (
            <Link
              key={key}
              to={`/discover?bucket=${key}`}
              className={`wz-alert-stat wz-alert-stat--link ${className}`}
              title={`Ver ${val} alerta(s) — ${hint}`}
            >
              {inner}
            </Link>
          )
        }
        return (
          <div key={key} className={`wz-alert-stat ${className}`} title={hint}>
            {inner}
          </div>
        )
      })}
    </div>
  )
}