"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * The numeric value to display
   */
  value: number
  /**
   * Optional prefix (e.g., "$", "GBP")
   */
  prefix?: string
  /**
   * Optional suffix (e.g., "%", "+", "k")
   */
  suffix?: string
  /**
   * Label/description below the number
   */
  label: string
  /**
   * Enable counting animation
   * @default true
   */
  animated?: boolean
  /**
   * Animation duration in milliseconds
   * @default 2000
   */
  duration?: number
  /**
   * Number of decimal places
   * @default 0
   */
  decimals?: number
  /**
   * Visual variant
   * @default "default"
   */
  variant?: "default" | "bordered" | "gradient"
}

function useCountUp(
  end: number,
  duration: number,
  decimals: number,
  animated: boolean
) {
  const [count, setCount] = React.useState(animated ? 0 : end)
  const countRef = React.useRef(animated ? 0 : end)
  const frameRef = React.useRef<number | null>(null)

  React.useEffect(() => {
    if (!animated) {
      setCount(end)
      return
    }

    const startTime = performance.now()
    const startValue = 0

    const animate = (currentTime: number) => {
      const elapsed = currentTime - startTime
      const progress = Math.min(elapsed / duration, 1)
      
      // Easing function (ease-out cubic)
      const eased = 1 - Math.pow(1 - progress, 3)
      
      const currentValue = startValue + (end - startValue) * eased
      countRef.current = currentValue
      setCount(currentValue)

      if (progress < 1) {
        frameRef.current = requestAnimationFrame(animate)
      }
    }

    frameRef.current = requestAnimationFrame(animate)

    return () => {
      if (frameRef.current) {
        cancelAnimationFrame(frameRef.current)
      }
    }
  }, [end, duration, animated])

  return decimals > 0 ? count.toFixed(decimals) : Math.round(count).toString()
}

const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
  (
    {
      className,
      value,
      prefix,
      suffix,
      label,
      animated = true,
      duration = 2000,
      decimals = 0,
      variant = "default",
      ...props
    },
    ref
  ) => {
    const displayValue = useCountUp(value, duration, decimals, animated)

    return (
      <div
        ref={ref}
        className={cn(
          "group relative flex flex-col items-center justify-center rounded-2xl p-6 text-center transition-all duration-300",
          // Variant styles
          variant === "default" &&
            "bg-card/50 hover:bg-card/70 border border-border/50",
          variant === "bordered" &&
            "bg-transparent border-2 border-border hover:border-primary/50",
          variant === "gradient" &&
            "bg-gradient-to-br from-card via-card/95 to-muted border border-border/50 hover:border-primary/30",
          className
        )}
        {...props}
      >
        {/* Value */}
        <div className="flex items-baseline gap-1">
          {prefix && (
            <span className="text-xl font-medium text-muted-foreground transition-colors group-hover:text-primary/70">
              {prefix}
            </span>
          )}
          <span className="text-4xl font-bold tabular-nums text-foreground transition-colors group-hover:text-primary">
            {displayValue}
          </span>
          {suffix && (
            <span className="text-xl font-medium text-muted-foreground transition-colors group-hover:text-primary/70">
              {suffix}
            </span>
          )}
        </div>

        {/* Label */}
        <span className="mt-2 text-sm text-muted-foreground">{label}</span>

        {/* Hover glow for gradient variant */}
        {variant === "gradient" && (
          <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100">
            <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/10 via-transparent to-transparent" />
          </div>
        )}
      </div>
    )
  }
)
StatsCard.displayName = "StatsCard"

export { StatsCard }
Stats Card

Dependencies

Files

Installation
