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

const HeuristicsCard = ({ riskAssessment, onShowHelp }) => {
  if (!riskAssessment?.evidence?.features) {
    return (
      <div className="card">
        <h3>
          Heuristics
          <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
        </h3>
        <div className="content">
          <p className="muted">No heuristic data available</p>
        </div>
      </div>
    );
  }

  const features = riskAssessment.evidence.features;
  
  const heuristicItems = [
    {
      label: 'Inter-event Entropy',
      value: features.interEventEntropy,
      description: 'Timing pattern randomness'
    },
    {
      label: 'Interval Regularity',
      value: features.fixedIntervalScore,
      description: 'Time interval consistency'
    },
    {
      label: 'Path Straightness',
      value: features.pathStraightness,
      description: 'Mouse movement straightness'
    }
  ];

  return (
    <div className="card">
      <h3>
        Heuristics
        <button className="help-btn" onClick={onShowHelp} title="Help">?</button>
      </h3>
      <div className="content">
        {heuristicItems.map((item, index) => {
          const formattedValue = formatNumber(item.value, 2);
          const progressStyle = getProgressBarStyle(item.value, 'risk');
          
          return (
            <div key={index} style={{ marginBottom: '16px' }}>
              <div className="muted" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                <span>{item.label}</span>
                <span>{formattedValue}</span>
              </div>
              <div className="bar">
                <div 
                  style={{
                    ...progressStyle,
                    height: '100%',
                    borderRadius: '999px',
                  }}
                />
              </div>
              <div className="muted" style={{ fontSize: '11px', marginTop: '2px' }}>
                {item.description}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default HeuristicsCard;