import React from 'react';

interface Props {
  title: string;
  value: string | number;
  unit?: string;
  icon: string;
  status?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown';
}

const MetricCard: React.FC<Props> = ({ title, value, unit, icon, status }) => {
  return (
    <div className="card">
      <div className="flex items-center justify-between mb-2">
        <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide">
          <i className={`${icon} mr-2`}></i>
          {title}
        </h3>
        {status && (
          <span className={`status-badge text-xs ${status}`}>
            <i className="fas fa-circle text-xs"></i>
          </span>
        )}
      </div>
      <div className="flex items-baseline">
        <div className="text-3xl font-bold text-gray-900">{value}</div>
        {unit && <span className="ml-2 text-sm text-gray-500">{unit}</span>}
      </div>
    </div>
  );
};

export default MetricCard;

