"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx } from "../../../styles/styler.js";
import { Box } from "../../Box.js";
import { Image as Image$1 } from "../../Image.js";
import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
import { AvatarIcon } from "./AvatarIcon.js";
import { AvatarText } from "./AvatarText.js";
import { useEffect, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/client/Avatar/AvatarImage.tsx
/**
* **AvatarImage Component**
*
* Renders an Avatar with an image. If the image fails to load, it falls back first to
* a text representation (if a name or initials are provided) and then to an icon.
*
* @param props - Props for image variant.
* @returns The AvatarImage element.
*/
const AvatarImage = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }) => {
	const [loadingState, setLoadingState] = useState("loading");
	useEffect(() => {
		let mounted = true;
		if (src || srcSet) {
			const img = new Image();
			img.onload = () => {
				if (mounted) setLoadingState("loaded");
			};
			img.onerror = () => {
				if (mounted) setLoadingState("error");
			};
			if (src) img.src = src;
			if (srcSet) img.srcset = srcSet;
		} else setLoadingState("error");
		return () => {
			mounted = false;
		};
	}, [src, srcSet]);
	const classNames = useMemo(() => ({
		root: buildAvatarRootClasses(size, {
			avatarImageVariantRoot: variant,
			className: cx("overflow-hidden", className)
		}),
		contents: cx("w-full", "h-full", "shrink-0", "text-center", "inline-flex", "justify-center", "items-center", "object-cover")
	}), [
		className,
		size,
		variant
	]);
	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
	if (loadingState === "loaded") return /* @__PURE__ */ jsx(Box, {
		className: classNames.root,
		style: inlineStyles.root,
		...props,
		children: /* @__PURE__ */ jsx(Image$1, {
			src,
			srcSet,
			alt,
			className: classNames.contents,
			style: inlineStyles.contents,
			...imageProps,
			...slotProps?.image
		})
	});
	const sharedProps = {
		...props,
		size,
		customSize,
		variant
	};
	if (fallback || alt) return /* @__PURE__ */ jsx(AvatarText, {
		name: alt,
		initials: fallback,
		abbreviationStrategy,
		slotProps: { text: slotProps?.text },
		...sharedProps
	});
	return /* @__PURE__ */ jsx(AvatarIcon, {
		...sharedProps,
		slotProps: { icon: slotProps?.icon }
	});
};
AvatarImage.displayName = "AvatarImage";

//#endregion
export { AvatarImage };