import {useState} from 'react';
import {UserRound} from 'lucide-react';
import {cn} from '@/lib/utils';

/**
 * The Steam avatar, or the default user icon without one or when it does not load.
 *
 * @param className for the avatar image
 * @param iconClassName for the default icon, which should be smaller than the image
 */
export default function SteamAvatar({url, className, iconClassName}) {
    const [failedUrl, setFailedUrl] = useState(null);

    if (!url || failedUrl === url) {
        return <UserRound className={cn('size-5', iconClassName)}/>;
    }
    return (
        <img src={url} alt="" onError={() => setFailedUrl(url)}
             className={cn('size-7 rounded-full object-cover', className)}/>
    );
}