import React from 'react';
import '../styles/KPICard.css';

interface KPICardProps {
  kpi: any;
  color: string;
}

export const KPICard: React.FC<KPICardProps> = ({ kpi, color }) => {
  const getStatusIcon = () => {
    switch (kpi.status) {
      case 'good':
        return '✓';
      case 'warning':
        return '⚠';
      case 'critical':
        return '🔴';
      default:
        return '•';
    }
  };

  const getTrendIcon = () => {
    if (!kpi.latest) return '•';
    
    // Déterminer la tendance basée sur les données de la dernière semaine
    return '📊'; // Placeholder pour l'instant
  };

  const getStatusClass = () => {
    return `status-${kpi.status}`;
  };

  return (
    <div className="kpi-card" style={{ borderLeftColor: color }}>
      <div className="kpi-header" style={{ color }}>
        <h3 className="kpi-title">{kpi.name}</h3>
        <span className="kpi-trend">{getTrendIcon()}</span>
      </div>
      
      <div className="kpi-value-section">
        <div className="kpi-value">{kpi.value}</div>
        <div className="kpi-unit">{kpi.unit}</div>
      </div>

      <div className="kpi-footer">
        <span className={`kpi-status ${getStatusClass()}`}>
          {getStatusIcon()} {kpi.status?.charAt(0).toUpperCase() + kpi.status?.slice(1) || 'N/A'}
        </span>
        {kpi.target && (
          <span className="kpi-target">
            Obj: {kpi.target} {kpi.unit}
          </span>
        )}
      </div>

      <p className="kpi-description">{kpi.description}</p>
    </div>
  );
};
