import { useAnimatedCounter } from '@/hooks/useAnimatedCounter';
import { cn } from '@/lib/utils';

interface AnimatedNumberProps {
  value: number;
  duration?: number;
  className?: string;
  format?: (n: number) => string;
}

export function AnimatedNumber({ value, duration = 1000, className, format }: AnimatedNumberProps) {
  const count = useAnimatedCounter({ end: value, duration });
  const display = format ? format(count) : count.toLocaleString();

  return <span className={cn('tabular-nums', className)}>{display}</span>;
}