// 1×1 transparent GIF — used as img fallback so the browser never enters
// broken-image state while waiting for the JXL polyfill to decode the source.
const TRANSPARENT =
    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

export function Avatar({
    userId,
    version,
    size = 32,
}: {
    userId: number | null;
    version?: number | null;
    size?: number;
}) {
    const style = `width:${size}px;height:${size}px`;
    if (!userId) {
        return (
            <span
                class="avatar avatar-placeholder"
                style={`${style};font-size:${Math.round(size * 0.45)}px`}
            >
                ?
            </span>
        );
    }
    const src =
        version != null
            ? `/avatars/${userId}.jxl?v=${version}`
            : `/avatars/${userId}.jxl`;
    return (
        <picture class="avatar" style={style}>
            <source srcset={src} type="image/jxl" />
            <img
                src={TRANSPARENT}
                alt=""
                width={String(size)}
                height={String(size)}
                class="avatar-img"
            />
        </picture>
    );
}