import React from "react";

interface StatCardProps {
  icon: string;
  label: string;
  value: string;
  trend?: string;
  color?: "green" | "blue" | "purple" | "orange";
}

export default function StatCard({
  icon,
  label,
  value,
  trend,
  color = "green",
}: StatCardProps) {
  const colorClasses = {
    green:
      "from-brand-green/10 to-emerald-500/10 border-brand-green/30 text-brand-green",
    blue: "from-blue-500/10 to-blue-600/10 border-blue-500/30 text-blue-600",
    purple:
      "from-purple-500/10 to-purple-600/10 border-purple-500/30 text-purple-600",
    orange:
      "from-orange-500/10 to-orange-600/10 border-orange-500/30 text-orange-600",
  };

  return (
    <div
      className={`bg-gradient-to-br ${colorClasses[color]} border rounded-xl p-6 hover:shadow-lg transition-all duration-300 hover:-translate-y-1`}
    >
      <div className="flex items-start justify-between mb-3">
        <span className="text-3xl">{icon}</span>
        {trend && (
          <span className="text-xs font-semibold bg-white/50 px-2 py-1 rounded-full">
            {trend}
          </span>
        )}
      </div>
      <div className="text-3xl font-bold mb-1">{value}</div>
      <div className="text-sm font-medium opacity-80">{label}</div>
    </div>
  );
}