import React from 'react';
import { ScheduleInfluencingFactors } from '../../types';
import { formatNumber } from '../../utils/formatters.ts';

const statusStyles = {
  ok: 'text-green-600',
  warning: 'text-yellow-600',
  critical: 'text-red-600',
};

const FactorCard: React.FC<{
  icon: string;
  label: string;
  value: number;
  unit: string;
  status: 'ok' | 'warning' | 'critical';
}> = ({ icon, label, value, unit, status }) => (
  <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
    <div className={`text-2xl w-8 text-center ${statusStyles[status]}`}>
      <i className={`fa-solid ${icon}`}></i>
    </div>
    <div>
      <p className="text-xs text-gray-500 font-medium">{label}</p>
      <p className="font-bold text-gray-800">
        {formatNumber(value)} {unit}
      </p>
    </div>
  </div>
);

interface InfluencingFactorsProps {
  factors: ScheduleInfluencingFactors;
}

const InfluencingFactors: React.FC<InfluencingFactorsProps> = ({ factors }) => {
  return (
    <div className="bg-white p-6 rounded-xl shadow-sm">
      <h2 className="text-xl font-bold mb-4">Faktor-faktor Pengaruh</h2>
      <div className="space-y-3">
        <FactorCard
          icon="fa-temperature-high"
          label="Suhu Lingkungan"
          value={factors.temperature.value}
          unit={factors.temperature.unit}
          status={factors.temperature.status}
        />
        <FactorCard
          icon="fa-droplet"
          label="Kelembapan"
          value={factors.humidity.value}
          unit={factors.humidity.unit}
          status={factors.humidity.status}
        />
        <FactorCard
          icon="fa-person-running"
          label="Tingkat Aktivitas"
          value={factors.activityLevel.value}
          unit={factors.activityLevel.unit}
          status={factors.activityLevel.status}
        />
      </div>
    </div>
  );
};

export default InfluencingFactors;