const StatCard = ({ Icon, number, label, color = 'teal' }) => {
  const colorClasses = {
    teal: 'bg-gradient-to-r from-teal-500 to-blue-500',
    blue: 'bg-gradient-to-r from-blue-500 to-cyan-500',
    emerald: 'bg-gradient-to-r from-emerald-500 to-teal-500',
    amber: 'bg-gradient-to-r from-amber-500 to-orange-500'
  };

  return (
    <div className="bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:border-teal-200 text-center p-8">
      <div className={`inline-flex items-center justify-center w-16 h-16 ${colorClasses[color]} text-white rounded-2xl mb-6`}>
        <Icon className="w-8 h-8" />
      </div>
      <div className="text-3xl font-bold text-gray-900 mb-2">{number}</div>
      <div className="text-gray-600">{label}</div>
    </div>
  );
};

export default StatCard;