import { useCountUp, parseNumberFromString, formatWithOriginalString } from '@/hooks/use-countup';

interface CountUpNumberProps {
    value: string;
    duration?: number;
    className?: string;
}

const CountUpNumber = ({ value, duration = 2000, className = '' }: CountUpNumberProps) => {
    const numericValue = parseNumberFromString(value);
    const decimals = value.includes('.') ? value.split('.')[1].match(/\d+/)?.[0]?.length || 0 : 0;

    const { count, elementRef } = useCountUp({
        end: numericValue,
        duration,
        decimals,
        startOnInView: true
    });

    const formattedValue = formatWithOriginalString(value, count);

    return (
        <span ref={elementRef} className={className}>
            {formattedValue}
        </span>
    );
};

export default CountUpNumber;
