import { StatCard } from "@/types/performance-summary";

interface PerformanceStatCardsProps {
  stats: StatCard[];
}

export function PerformanceStatCards({ stats }: PerformanceStatCardsProps) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6 mb-8">
      {stats.map((stat, index) => (
        <div
          key={index}
          className={`relative overflow-hidden rounded-lg border-2 px-5 py-5 shadow-md transition-all duration-300 ${
            stat.isNegative
              ? "border-red-200 bg-gradient-to-br from-red-50 via-white/95 to-red-50/50"
              : "border-white/70 bg-white/95 ring-1 ring-black/5"
          }`}
        >
          <div
            className={`absolute -top-10 -right-12 h-32 w-32 rounded-lg ${
              stat.isNegative ? "bg-red-100/30" : "bg-[#428B4D]/5"
            }`}
          />
          <div
            className={`absolute -bottom-16 -left-8 h-32 w-32 rounded-lg blur-2xl ${
              stat.isNegative ? "bg-red-100/40" : "bg-[#428B4D]/10"
            }`}
          />
          <div className="relative z-10 space-y-1.5">
            <p
              className={`text-xs font-semibold uppercase tracking-wide ${
                stat.isNegative ? "text-red-600" : "text-slate-500"
              }`}
            >
              {stat.label}
            </p>
            <p
              className={`text-xl font-bold ${
                stat.isNegative ? "text-red-700" : "text-slate-900"
              }`}
            >
              {stat.value}
            </p>
            <p className="text-xs text-slate-500">{stat.helper}</p>
          </div>
        </div>
      ))}
    </div>
  );
}