"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx } from "../../../styles/styler.js";
import { Box } from "../../Box.js";
import { Text } from "../../Text.js";
import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles, generateAvatarAbbreviation } from "./utils.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/client/Avatar/AvatarText.tsx
/**
* **AvatarText Component**
*
* Renders an Avatar with text (initials) representation.
*
* @param props - Props for text variant.
* @returns The AvatarText element.
*/
const AvatarText = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }) => {
	const classNames = useMemo(() => ({
		root: buildAvatarRootClasses(size, {
			avatarTextVariantRoot: variant,
			className: cx("overflow-hidden", "truncate", className)
		}),
		text: cx("w-full", "h-full", "shrink-0", "overflow-hidden", "text-center", "inline-flex", "justify-center", "items-center", "truncate")
	}), [
		className,
		size,
		variant
	]);
	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
	return /* @__PURE__ */ jsx(Box, {
		className: classNames.root,
		style: inlineStyles.root,
		...props,
		children: /* @__PURE__ */ jsx(Text, {
			color: "inherit",
			variant: "inherit",
			className: classNames.text,
			style: inlineStyles.contents,
			...slotProps?.text,
			children: initials || generateAvatarAbbreviation(name, abbreviationStrategy)
		})
	});
};
AvatarText.displayName = "AvatarText";

//#endregion
export { AvatarText };