import React from 'react';
import { formatNumber, formatTime, getRiskLevel } from '../utils/formatters';

const RiskHistoryCard = ({ riskHistory, onShowHelp }) => {
  if (!riskHistory || riskHistory.length === 0) {
    return (
      <div className="card">
        <h3>
          Risk History
          <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
        </h3>
        <div className="content">
          <p className="muted">No history available</p>
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <h3>
        Risk History
        <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
      </h3>
      <div className="content">
        <ul className="history-list">
          {riskHistory.map((entry, index) => {
            const riskInfo = getRiskLevel(entry.riskScore);
            const formattedScore = formatNumber(entry.riskScore, 3);
            const formattedTime = formatTime(entry.timestampUtc);
            
            return (
              <li key={index} className="history-item">
                <span className="history-time">{formattedTime}</span>
                <span className={`history-score ${riskInfo.class}`}>
                  {formattedScore}
                </span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default RiskHistoryCard;