import React from 'react';

export default function HistoryTimeline({ snapshots, selectedVersion, onSelect }) {
  return (
    <div className="decidron-panel">
      <h2>Network Modification History</h2>
      <p className="panel-hint">
        Each topology change is snapshotted. Select a version to view that
        network state in the diagram above.
      </p>
      {(!snapshots || snapshots.length === 0) ? (
        <p className="panel-hint">No snapshots yet.</p>
      ) : (
        snapshots.map((s) => (
          <div
            key={s.version}
            className={`decidron-history-item ${s.version === selectedVersion ? 'active' : ''}`}
            onClick={() => onSelect(s)}
          >
            <strong>v{s.version}</strong> — {s.reason}
            <span style={{ float: 'right', opacity: 0.6 }}>
              {new Date(s.timestamp * 1000).toLocaleTimeString()}
            </span>
          </div>
        ))
      )}
    </div>
  );
}