import { motion, useReducedMotion } from 'framer-motion';
import type { ReactNode } from 'react';

interface Props {
  children: ReactNode;
  onClick?: () => void;
  className?: string;
}

export const AnimatedNumber = ({ children, onClick, className }: Props) => {
  const reducedMotion = useReducedMotion();

  return (
    <motion.span
      className={className}
      aria-hidden
      initial={{ zoom: 0.01 }}
      animate={{ zoom: 1 }}
      exit={{ zoom: 0.01 }}
      transition={{
        duration: reducedMotion ? 0 : 0.3,
        type: 'tween',
        ease: [0.3, 0, 0.1, 1],
      }}
      onClick={() => onClick?.()}
    >
      <motion.span
        initial={{ opacity: 0 }}
        animate={{ opacity: [0, 0, 1] }}
        exit={{ opacity: [1, 0, 0] }}
        transition={{
          duration: reducedMotion ? 0 : 0.3,
          times: [0, 0.5, 1],
        }}
      >
        {children}
      </motion.span>
    </motion.span>
  );
};