"use client";

import { cn } from "@/lib/utils";

interface ImpactRippleProps {
  count: number;
  label: string;
  isAnimating?: boolean;
}

export function ImpactRipple({
  count,
  label,
  isAnimating = false,
}: ImpactRippleProps) {
  return (
    <div className="flex flex-col items-center p-4">
      <div className="relative">
        {/* Ripple rings */}
        {isAnimating && (
          <>
            <div className="absolute inset-0 rounded-full bg-amber-500/20 animate-ping" />
            <div
              className="absolute inset-0 rounded-full bg-amber-500/10 animate-ping"
              style={{ animationDelay: "150ms" }}
            />
          </>
        )}
        {/* Count circle */}
        <div
          className={cn(
            "relative w-16 h-16 rounded-full flex items-center justify-center",
            "bg-amber-500/10 border-2 border-amber-500/30",
            isAnimating && "scale-110 transition-transform duration-300"
          )}
        >
          <span className="text-xl font-bold text-amber-600 dark:text-amber-400">
            {count}
          </span>
        </div>
      </div>
      <span className="mt-2 text-xs text-muted-foreground">{label}</span>
    </div>
  );
}
