import React from "react";
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { THEME } from "../theme";

type AnimatedCounterProps = {
  from: number;
  to: number;
  startFrame?: number;
  fontSize?: number;
  color?: string;
  suffix?: string;
};

export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({
  from,
  to,
  startFrame = 0,
  fontSize = 140,
  color = THEME.colors.white,
  suffix = "",
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame: frame - startFrame,
    fps,
    config: { damping: 30, mass: 1, stiffness: 80 },
  });

  const value = Math.round(interpolate(progress, [0, 1], [from, to]));

  const scale = spring({
    frame: frame - startFrame,
    fps,
    config: { damping: 10, mass: 0.4, stiffness: 200 },
  });

  const scaleValue = interpolate(scale, [0, 1], [0.5, 1]);

  return (
    <div
      style={{
        fontFamily: THEME.font.heading,
        fontSize,
        fontWeight: 900,
        color,
        textShadow: THEME.textShadow,
        transform: `scale(${scaleValue})`,
        textAlign: "center",
      }}
    >
      {value}
      {suffix}
    </div>
  );
};
