// HistoryPanel — resolved-alerts timeline (real data: alerts curated to
// status='resolved'). Monochrome by design: everything here is already over,
// so nothing earns a semantic color.
function HistoryPanel({ t, items }) {
  if (!items || items.length === 0) {
    return (
      <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-secondary)', opacity: 0.6, padding: '20px 0' }}>
        {t('history.empty')}
      </p>
    );
  }
  return (
    <div>
      {items.map((h, i) => (
        <div key={i} style={{ display: 'flex', gap: 16, padding: '18px 4px',
          borderBottom: i < items.length - 1 ? '1px solid var(--border-color)' : 'none' }}>
          <div style={{ fontSize: 10, color: 'var(--text-secondary)', opacity: 0.6, flex: 'none', width: 84, marginTop: 2 }}>{h.date}</div>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{h.title}</span>
              <span className="label-tech">{t('history.resolved')}</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4, lineHeight: 1.5 }}>{h.note}</div>
          </div>
        </div>
      ))}
    </div>
  );
}
window.HistoryPanel = HistoryPanel;