function AlertFeed({ alerts }) {
  return (
    <div className="card" style={{ height: '100%' }}>
      <div className="card-head">
        <h3>Race control feed</h3>
        <span className="pill live" style={{ marginLeft: 'auto' }}><span className="dot"></span>LIVE</span>
      </div>
      <div style={{ maxHeight: 360, overflowY: 'auto' }}>
        {alerts.map((a, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '4px 1fr auto', gap: 12, alignItems: 'flex-start', padding: '10px 14px', borderBottom: '1px solid var(--hairline)' }}>
            <div style={{ width: 4, alignSelf: 'stretch', background: a.color }}></div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 500 }}>{a.msg}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{a.detail}</div>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)' }}>{a.time}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.AlertFeed = AlertFeed;