"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../../styles/styler.js";
import { Box } from "../../Box.js";
import { IconSlot } from "../../IconSlot.js";
import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { Building, Person } from "@yahoo/uds-icons";

//#region src/components/client/Avatar/AvatarIcon.tsx
/** Maps avatar variant to icon */
const mapVariantToIcon = {
	primary: Person,
	secondary: Building
};
/**
* **AvatarIcon Component**
*
* Renders an Avatar with an icon representation.
*
* @param props - Props for icon variant.
* @returns The AvatarIcon element.
*/
const AvatarIcon = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }) => {
	const classNames = useMemo(() => ({
		root: buildAvatarRootClasses(size, {
			avatarIconVariantRoot: variant,
			overflow: "hidden",
			className: cx("overflow-hidden", className)
		}),
		iconContainer: cx("w-full", "h-full", "shrink-0", "overflow-hidden", "text-center", "inline-flex", "justify-center", "items-center"),
		icon: getStyles({ avatarSizeIcon: size })
	}), [
		className,
		size,
		variant
	]);
	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
	const iconSvg = icon ?? mapVariantToIcon[variant ?? "primary"];
	return /* @__PURE__ */ jsx(Box, {
		className: classNames.root,
		style: inlineStyles.root,
		...props,
		children: /* @__PURE__ */ jsx(Box, {
			className: classNames.iconContainer,
			style: inlineStyles.contents,
			children: /* @__PURE__ */ jsx(IconSlot, {
				icon: iconSvg,
				iconProps: {
					variant: "fill",
					color: "current",
					...slotProps?.icon
				},
				className: classNames.icon
			})
		})
	});
};
AvatarIcon.displayName = "AvatarIcon";

//#endregion
export { AvatarIcon };