ToBePlayed-Frontend/src/components/CurrentlyPlayingCard.jsx

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

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

/**
 * @param wide four games per row instead of two, for the large tile
 */
export default function CurrentlyPlayingCard({games, syncing, wide}) {
    const {t} = useTranslation();
    return (
        <Card className="gap-0 py-0">
            <div className="flex flex-wrap items-center justify-between gap-x-3 px-5 py-4 border-b">
                <h2 className="flex items-center gap-2 font-semibold">
                    <Gamepad2 className="size-4 text-primary"/>
                    {t('DASHBOARD.CURRENTLY_PLAYING')}
                </h2>
                <Button asChild variant="ghost" size="sm">
                    <Link to="/library?status=PLAYING">{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('DASHBOARD.NOTHING_PLAYING')}
                </p>
            ) : (
                <ul className={cn('grid grid-cols-2 gap-3 p-4', wide && 'sm:grid-cols-4')}>
                    {games.map((g) => (
                        <li key={g.appid}>
                            <Link to={`/library/${g.appid}`} className="group block space-y-1.5">
                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-full transition-opacity group-hover:opacity-80"/>
                                <div className="@container text-sm font-medium group-hover:text-primary transition-colors">
                                    <FitText text={g.name ?? `App ${g.appid}`}/>
                                </div>
                                <div className="text-xs text-muted-foreground tabular-nums">
                                    {formatPlaytime(g.totalPlaytimeMinutes ?? g.playtimeMinutes)}
                                </div>
                            </Link>
                        </li>
                    ))}
                </ul>
            )}
        </Card>
    );
}