/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../../_virtual/_rolldown/runtime.cjs");
const require_styles_styler = require("../../../styles/styler.cjs");
const require_components_Box = require("../../Box.cjs");
const require_components_Image = require("../../Image.cjs");
const require_components_client_Avatar_utils = require("./utils.cjs");
const require_components_client_Avatar_AvatarIcon = require("./AvatarIcon.cjs");
const require_components_client_Avatar_AvatarText = require("./AvatarText.cjs");
let react = require("react");
let react_jsx_runtime = require("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 = (0, react.forwardRef)(({ size = "md", variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }, ref) => {
	const [loadingState, setLoadingState] = (0, react.useState)("loading");
	(0, react.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 = (0, react.useMemo)(() => ({
		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
			avatarImageVariantRoot: variant,
			className: require_styles_styler.cx("overflow-hidden", className)
		}),
		contents: require_styles_styler.cx("w-full", "h-full", "shrink-0", "text-center", "inline-flex", "justify-center", "items-center", "object-cover")
	}), [
		className,
		size,
		variant
	]);
	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
	if (loadingState === "loaded") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
		ref,
		className: classNames.root,
		style: inlineStyles.root,
		...props,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Image.Image, {
			src,
			srcSet,
			alt,
			className: classNames.contents,
			style: inlineStyles.contents,
			...imageProps,
			...slotProps?.image
		})
	});
	const sharedProps = {
		...props,
		className,
		size,
		customSize,
		variant
	};
	if (fallback || alt) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarText.AvatarText, {
		ref,
		name: alt,
		initials: fallback,
		abbreviationStrategy,
		slotProps: { text: slotProps?.text },
		...sharedProps
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarIcon.AvatarIcon, {
		ref,
		...sharedProps,
		slotProps: { icon: slotProps?.icon }
	});
});
AvatarImage.displayName = "AvatarImage";
//#endregion
exports.AvatarImage = AvatarImage;
