"use client";
import { useState } from "react";

export function ProfileImage({
	src,
	alt,
	width,
	height,
	fallback,
	className,
}: {
	src: string;
	alt: string;
	width: number;
	height: number;
	fallback?: string;
	className?: string;
}) {
	const [failedSrc, setFailedSrc] = useState<string | null>(null);
	const failed = failedSrc === src;
	if (failed && !fallback)
		return (
			<span
				role="img"
				aria-label={alt}
				className={className}
				style={{
					width,
					height,
					display: "inline-grid",
					placeItems: "center",
					fontSize: "2rem",
					fontWeight: 700,
				}}
			>
				{alt.slice(0, 1).toUpperCase()}
			</span>
		);
	return (
		<img
			src={failed ? fallback : src}
			alt={alt}
			width={width}
			height={height}
			className={className}
			loading="lazy"
			decoding="async"
			onError={() => setFailedSrc(src)}
		/>
	);
}