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

import {Button} from '@/components/ui/button';
import {Card} from '@/components/ui/card';
import GameCover from './GameCover.jsx';
import FitText from './FitText.jsx';

/**
 * The first games of the user's own backlog order.
 */
export default function UpNextCard({games}) {
    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">
                    <ListOrdered className="size-4 text-primary"/>
                    {t('DASHBOARD.UP_NEXT')}
                </h2>
                <Button asChild variant="ghost" size="sm">
                    <Link to="/backlog">{t('DASHBOARD.SHOW_ALL')}<ArrowRight/></Link>
                </Button>
            </div>

            {games.length === 0 ? (
                <p className="px-5 py-10 text-center text-sm text-muted-foreground">{t('DASHBOARD.UP_NEXT_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 px-4 py-2.5 transition-colors hover:bg-muted/50">
                                <span className="w-4 shrink-0 text-right text-sm tabular-nums text-muted-foreground">{index + 1}</span>
                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 shrink-0"/>
                                <div className="@container min-w-0 flex-1 text-sm font-medium group-hover:text-primary transition-colors">
                                    <FitText text={g.name ?? `App ${g.appid}`}/>
                                </div>
                            </Link>
                        </li>
                    ))}
                </ol>
            )}
        </Card>
    );
}