export default function StatCard({ icon: Icon, label, value, sub, gradient }) {
  return (
    <div className={`stat-card ${gradient}`}>
      <div className="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-white/10" />
      <div className="relative">
        <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-white/20">
          <Icon className="h-5 w-5" />
        </div>
        <p className="text-sm font-medium text-white/80">{label}</p>
        <p className="mt-1 font-display text-2xl font-bold">{value}</p>
        {sub && <p className="mt-1 text-xs text-white/70">{sub}</p>}
      </div>
    </div>
  );
}
