/**
 * CustomEmojiImage — renders a custom emoji image given an `mxc://`
 * URL (or a raw http URL), resolving through the authenticated media
 * endpoint via `useMxcUrl`. While the blob is being fetched the img
 * has no src, so the browser draws nothing; once resolved the image
 * pops in. Cached across the tab lifetime so repeat renders are
 * instant.
 *
 * Forwards all other img props (className, alt, title, draggable,
 * width/height, etc.), so callers can style the element normally.
 */
import { useMxcUrl } from '@app/hooks/useMxcUrl';

interface CustomEmojiImageProps
	extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
	/** Either an mxc:// URL (will be resolved via auth) or a direct http URL. */
	mxc: string;
}

export function CustomEmojiImage({ mxc, alt = '', ...rest }: CustomEmojiImageProps) {
	const src = useMxcUrl(mxc);
	// Don't set src until it resolves — otherwise the browser eagerly
	// fetches an empty string and logs an error.
	return <img src={src || undefined} alt={alt} {...rest} />;
}
