ToBePlayed-Frontend/src/components/MostPlayedCard.jsx

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

import {Button} from '@/components/ui/button';
import {Card} from '@/components/ui/card';
import GameCover from './GameCover.jsx';
import {formatPlaytime} from '../utils/games.js';

export default function MostPlayedCard({games, syncing}) {
    const {t} = useTranslation();
    const maxMinutes = games[0]?.playtimeMinutes || 1;
    return (
        <Card className="gap-0 py-0">
            <div className="flex items-center justify-between px-5 py-4 border-b">
                <h2 className="flex items-center gap-2 font-semibold">
                    <Trophy className="size-4 text-amber-500"/>
                    {t('DASHBOARD.MOST_PLAYED')}
                </h2>
                <Button asChild variant="ghost" size="sm">
                    <Link to="/library">{t('DASHBOARD.SHOW_ALL')}<ArrowRight/></Link>
                </Button>
            </div>

            {games.length === 0 ? (
                <p className="px-5 py-10 text-center text-sm text-muted-foreground">
                    {syncing ? t('LIBRARY.SYNCING_FIRST_TIME') : t('LIBRARY.EMPTY')}
                </p>
            ) : (
                <ol className="divide-y">
                    {games.map((g, index) => (
                        <li key={g.appid}>
                            <Link
                                to={`/library/${g.appid}`}
                                className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3 transition-colors hover:bg-muted/50"
                            >
                                <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">
                                    {index + 1}
                                </span>
                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 sm:w-24 shrink-0"/>
                                <div className="min-w-0 flex-1">
                                    <div className="truncate font-medium group-hover:text-primary transition-colors">
                                        {g.name ?? `App ${g.appid}`}
                                    </div>
                                    <div className="mt-2 h-1.5 rounded-full bg-muted">
                                        <div
                                            className="h-full rounded-full bg-primary"
                                            style={{width: `${Math.max(2, (g.playtimeMinutes / maxMinutes) * 100)}%`}}
                                        />
                                    </div>
                                </div>
                                <span className="w-12 sm:w-14 text-right text-sm font-medium text-muted-foreground tabular-nums">
                                    {formatPlaytime(g.playtimeMinutes)}
                                </span>
                            </Link>
                        </li>
                    ))}
                </ol>
            )}
        </Card>
    );
}