ToBePlayed-Frontend/src/components/SteamGameCount.jsx

import {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {ArrowRight, Gamepad2} from 'lucide-react';

import {Card} from '@/components/ui/card';

const DURATION_MS = 1000;

const SteamGameCount = ({targetCount}) => {
    const {t} = useTranslation();
    const [count, setCount] = useState(0);

    useEffect(() => {
        let frame;
        let startTime;
        const animate = (timestamp) => {
            startTime ??= timestamp;
            const progress = Math.min((timestamp - startTime) / DURATION_MS, 1);
            setCount(Math.floor(progress * targetCount));
            if (progress < 1) {
                frame = requestAnimationFrame(animate);
            }
        };
        frame = requestAnimationFrame(animate);
        return () => cancelAnimationFrame(frame);
    }, [targetCount]);

    return (
        <Card className="relative justify-between overflow-hidden p-6">
            <div className="absolute -right-6 -top-6 size-32 rounded-full bg-primary/10"/>
            <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <Gamepad2 className="size-5"/>
            </div>
            <div>
                <div className="text-5xl font-bold tracking-tight tabular-nums">{count}</div>
                <div className="mt-1 text-sm text-muted-foreground">{t('DASHBOARD.STEAM_GAMES')}</div>
            </div>
            <Link to="/library" className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline">
                {t('DASHBOARD.TO_LIBRARY')} <ArrowRight className="size-4"/>
            </Link>
        </Card>
    );
};

export default SteamGameCount;