import { cn } from "@/design-system/utils/cn";

interface StatCardProps {
  label: string;
  value: string | number;
  subValue?: string;
  change?: {
    value: number;
    isPositive: boolean;
  };
  icon?: React.ReactNode;
  isLoading?: boolean;
  className?: string;
}

export function StatCard({
  label,
  value,
  subValue,
  change,
  icon,
  isLoading,
  className,
}: StatCardProps) {
  if (isLoading) {
    return (
      <div
        className={cn("bg-[#1e1e1e] rounded-lg p-6 animate-pulse", className)}
      >
        <div className="h-4 w-20 bg-[#2c2c2c] rounded mb-4" />
        <div className="h-8 w-32 bg-[#2c2c2c] rounded" />
      </div>
    );
  }

  return (
    <div
      className={cn(
        "bg-[#1e1e1e] rounded-lg p-6 border border-transparent hover:border-[#2c2c2c] transition-colors",
        className,
      )}
    >
      <div className="flex items-center justify-between mb-4">
        <span className="text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
          {label}
        </span>
        {icon && <span className="text-[#666666]">{icon}</span>}
      </div>

      <div className="flex items-baseline gap-3">
        <span className="text-2xl font-bold text-[#e1e1e1]">{value}</span>
        {change && (
          <span
            className={cn(
              "text-sm font-medium",
              change.isPositive ? "text-[#00ffcc]" : "text-[#ff5252]",
            )}
          >
            {change.isPositive ? "+" : ""}
            {change.value}%
          </span>
        )}
      </div>

      {subValue && <p className="text-sm text-[#a0a0a0] mt-2">{subValue}</p>}
    </div>
  );
}
