import React from 'react';
import { useCurrentFrame, spring, useVideoConfig } from 'remotion';

interface AnimatedNumberProps {
  value: number;
  startFrame?: number;
  prefix?: string;
  suffix?: string;
  decimals?: number;
  style?: React.CSSProperties;
}

export const AnimatedNumber: React.FC<AnimatedNumberProps> = ({
  value,
  startFrame = 0,
  prefix = '',
  suffix = '',
  decimals = 0,
  style = {},
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame: frame - startFrame,
    fps,
    config: { damping: 200 },
  });

  const currentValue = Math.round(value * progress * Math.pow(10, decimals)) / Math.pow(10, decimals);
  const display = decimals > 0 ? currentValue.toFixed(decimals) : Math.floor(currentValue).toLocaleString();

  return (
    <span style={style}>
      {prefix}{display}{suffix}
    </span>
  );
};
