import {useState} from 'react';
import {Gamepad2} from 'lucide-react';

import {cn} from '@/lib/utils';
import {coverUrl} from '@/utils/games.js';

/**
 * Steam store header (460x215). Falls back to a neutral tile when the app has no header image.
 */
export default function GameCover({appid, className}) {
    const [failed, setFailed] = useState(false);

    return (
        <div className={cn('aspect-[460/215] overflow-hidden rounded-md bg-muted', className)}>
            {failed ? (
                <div className="flex size-full items-center justify-center text-muted-foreground">
                    <Gamepad2 className="size-1/3 max-h-8"/>
                </div>
            ) : (
                <img
                    src={coverUrl(appid)}
                    alt=""
                    loading="lazy"
                    className="size-full object-cover"
                    onError={() => setFailed(true)}
                />
            )}
        </div>
    );
}