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

const RiskCard = ({ riskAssessment, onShowHelp }) => {
  if (!riskAssessment) {
    return (
      <div className="card">
        <h3>
          Machine Risk
          <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
        </h3>
        <div className="content">
          <p className="muted">No data available</p>
        </div>
      </div>
    );
  }

  const riskInfo = getRiskLevel(riskAssessment.riskScore);
  const formattedScore = formatNumber(riskAssessment.riskScore, 3);

  return (
    <div className="card">
      <h3>
        Machine Risk
        <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
      </h3>
      <div className="content">
        <div className="muted" style={{ marginBottom: '8px' }}>
          Machine ID: <strong>{riskAssessment.machineId}</strong>
        </div>
        
        <div className={`risk-score ${riskInfo.class}`}>
          {formattedScore}
        </div>
        
        <div className="muted" style={{ fontSize: '16px', fontWeight: '500' }}>
          Risk Level: <span className={riskInfo.class}>{riskInfo.level}</span>
        </div>
        
        <div className="bar" style={{ marginTop: '12px' }}>
          <div 
            style={{
              ...getProgressBarStyle(riskAssessment.riskScore, 'risk'),
              height: '100%',
              borderRadius: '999px',
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default RiskCard;