src/components/StatusBar.tsx

import React from 'react';

interface StatusBarProps {
  label: string;
  value: number;
  maxValue: number;
  color: string;
  icon: string;
}

const StatusBar: React.FC<StatusBarProps> = ({ label, value, maxValue, color, icon }) => {
  const percentage = (value / maxValue) * 100;
  
  const getBarColor = () => {
    if (percentage >= 70) return color;
    if (percentage >= 40) return '#FDE68A';
    return '#FECACA';
  };

  return (
    <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 shadow-lg hover:shadow-xl transition-all duration-300">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium text-gray-700 flex items-center gap-2">
          <span className="text-lg">{icon}</span>
          {label.replace(/^[^\s]+\s/, '')}
        </span>
        <span className="text-sm font-bold text-gray-800">{value}/{maxValue}</span>
      </div>
      
      <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
        <div 
          className="h-full rounded-full transition-all duration-1000 ease-out shadow-inner"
          style={{ 
            width: `${percentage}%`,
            backgroundColor: getBarColor(),
            background: `linear-gradient(90deg, ${getBarColor()}, ${getBarColor()}dd)`
          }}
        >
          {percentage > 10 && (
            <div className="w-full h-full bg-gradient-to-r from-white/20 to-transparent rounded-full"></div>
          )}
        </div>
      </div>
      
      {percentage < 30 && (
        <div className="mt-1 text-xs text-red-500 font-medium animate-pulse">
          ⚠️ Low {label.split(' ')[1] || label}
        </div>
      )}
    </div>
  );
};

export default StatusBar;