// assets/js/components/StatCard.js
const StatCard = ({ title, value, icon, colorClass = "text-blue-400" }) => (
  <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-6 rounded-xl shadow-lg border border-slate-700 hover:border-blue-500 transition-all">
    <div className="flex items-center justify-between">
      <div>
        <h3 className="text-slate-400 text-sm mb-2">{title}</h3>
        <div className={`text-3xl font-bold ${colorClass}`}>{value}</div>
      </div>
      <div className="text-4xl">{icon}</div>
    </div>
  </div>
);