frontend/src/components/StatCard.js

import React from 'react';

const StatCard = ({ title, value, icon: Icon, color = 'green', trend }) => {
  const colorClasses = {
    green: 'from-primary-500 via-emerald-500 to-teal-500 dark:from-primary-600 dark:via-emerald-600 dark:to-teal-600',
    blue: 'from-secondary-500 via-cyan-500 to-blue-500 dark:from-secondary-600 dark:via-cyan-600 dark:to-blue-600',
    purple: 'from-purple-500 via-fuchsia-500 to-pink-500 dark:from-purple-600 dark:via-fuchsia-600 dark:to-pink-600',
    orange: 'from-accent-500 via-orange-500 to-red-500 dark:from-accent-600 dark:via-orange-600 dark:to-red-600',
    red: 'from-rose-500 via-red-500 to-pink-500 dark:from-rose-600 dark:via-red-600 dark:to-pink-600',
  };

  return (
    <div className={`bg-gradient-to-br ${colorClasses[color]} rounded-xl shadow-lg hover:shadow-2xl dark:shadow-2xl p-6 text-white transform hover:scale-105 hover:-translate-y-1 transition-all duration-300 cursor-pointer animate-fade-in relative overflow-hidden group`}>
      <div className="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/5 to-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
      <div className="relative z-10">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium opacity-90 mb-1">{title}</p>
            <p className="text-4xl font-bold mb-1">{value}</p>
            {trend && (
              <p className="text-sm mt-2 opacity-75 font-medium">{trend}</p>
            )}
          </div>
          {Icon && (
            <div className="bg-white/20 backdrop-blur-md p-4 rounded-xl border border-white/30 shadow-lg group-hover:scale-110 transition-transform">
              <Icon className="text-4xl" />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default StatCard;