import { useState } from "react";
import useAnimatedNumber from "use-animated-number";

export default function Header() {
    const [ balance, setBalance ] = useState<number>(0);
    const animatedBalance: string = useAnimatedNumber(balance);

    const increase = () => {
        const randomIncrement: number = Math.floor(Math.random() * 100) + 1;
        setBalance(prevState => prevState + randomIncrement);
    }

    return (
        <section>
            <span> {animatedBalance} </span>
            <button onClick={increase}>Increase balance</button>
        </section>
    )
}