// HistoryPanel — resolved-alerts timeline. Monochrome by design: everything
// here is already over, so nothing earns a semantic color.
function HistoryPanel({ t }) {
  const { HISTORY } = window.EchoWatchData;
  return (
    <div>
      {HISTORY.map((h, i) => (
        <div key={i} style={{ display: 'flex', gap: 16, padding: '18px 4px',
          borderBottom: i < HISTORY.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;