import { cn } from "../../utils/cn.mjs";
import { Loader } from "../Loader/index.mjs";
import { User } from "lucide-react";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Avatar/index.tsx
/**
* @description Gets the capital letters from a name.
* @param name - The name to extract capitals from.
* @param separator - The separator to split the name (default is an empty string, which splits by each character).
* @returns {string[]} An array of capital letters from the name.
*/
const getCapitals = (name, separator = " ") => {
	if (!name) return [];
	return (separator === " " ? name.trim().split(/\s+/) : name.split(separator)).filter(Boolean).map((word) => word.charAt(0).toUpperCase());
};
/**
* Container component that renders either a button or div based on interactivity
*/
const Container = ({ isClickable, onClick, ...props }) => {
	if (isClickable && onClick) return /* @__PURE__ */ jsx("button", {
		...props,
		onClick,
		type: "button"
	});
	return /* @__PURE__ */ jsx("div", {
		...props,
		role: props.tabIndex !== void 0 || props["aria-label"] ? "img" : void 0
	});
};
/**
* Avatar component that displays user profile images, initials, or a default user icon.
* Supports loading states, authentication states, and accessibility features.
*
* @example
* ```tsx
* // With image
* <Avatar src="https://example.com/avatar.jpg" fullname="John Doe" />
*
* // With initials
* <Avatar fullname="John Doe" />
*
* // Clickable avatar
* <Avatar
*   fullname="John Doe"
*   onClick={(e) => console.log('Avatar clicked')}
* />
*
* // Loading state
* <Avatar isLoading fullname="John Doe" />
* ```
*/
const Avatar = ({ fullname, className, isLoading = false, isLoggedIn = true, src, onClick, size = "md", alt, focusable = false, ...props }) => {
	const isImageDefined = Boolean(src);
	const isNameDefined = Boolean((fullname ?? "").length > 0);
	const capitals = fullname ? getCapitals(fullname) : void 0;
	const displayLoader = isLoading;
	const displayAvatar = isLoggedIn && !displayLoader && isImageDefined;
	const displayInitials = isLoggedIn && !displayLoader && !displayAvatar && isNameDefined;
	const displayUserIcon = isLoggedIn && !displayLoader && !displayAvatar && !displayInitials;
	const isClickable = onClick !== void 0;
	const accessibilityProps = useMemo(() => {
		const baseProps = {};
		if (displayAvatar && alt) baseProps["aria-label"] = alt;
		else if (displayAvatar && fullname) baseProps["aria-label"] = `Avatar of ${fullname}`;
		else if (displayInitials && fullname) baseProps["aria-label"] = `Avatar initials for ${fullname}`;
		else if (displayUserIcon) baseProps["aria-label"] = "Default user avatar";
		else if (displayLoader) {
			baseProps["aria-label"] = "Loading avatar";
			baseProps["aria-busy"] = true;
		}
		if (!isClickable && focusable) baseProps.tabIndex = 0;
		if (isClickable) baseProps["aria-describedby"] = "avatar-description";
		return baseProps;
	}, [
		displayAvatar,
		displayInitials,
		displayUserIcon,
		displayLoader,
		alt,
		fullname,
		isClickable,
		focusable
	]);
	return /* @__PURE__ */ jsx(Container, {
		isClickable,
		className: cn(`rounded-full border-[1.3px] border-text p-[1.5px]`, size === "sm" && "size-7 border-[1px] p-[1px]", size === "md" && "size-9", size === "lg" && "size-12", size === "xl" && "size-16", isClickable && `cursor-pointer hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`, !isClickable && focusable && `focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`, displayLoader && "animate-pulse", className),
		onClick,
		...accessibilityProps,
		...props,
		children: /* @__PURE__ */ jsx("div", {
			className: "relative flex size-full flex-row items-center justify-center",
			children: /* @__PURE__ */ jsxs("div", {
				className: "absolute top-0 left-0 flex size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite",
				children: [
					displayLoader && /* @__PURE__ */ jsx(Loader, {
						className: "w-3/4",
						"aria-label": "Loading user avatar"
					}),
					displayAvatar && /* @__PURE__ */ jsx("img", {
						className: "size-full rounded-full object-cover",
						src,
						srcSet: src,
						alt: alt ?? `Avatar of ${fullname}`,
						width: 59,
						height: 59,
						loading: "lazy",
						draggable: false
					}),
					displayInitials && /* @__PURE__ */ jsx("div", {
						className: "flex size-full items-center justify-center gap-[0.1rem] font-bold text-sm max-md:py-1",
						children: capitals?.map((capital, index) => /* @__PURE__ */ jsx("span", { children: capital }, `${capital}-${index}`))
					}),
					displayUserIcon && /* @__PURE__ */ jsx(User, {
						size: cn(size === "sm" && 14, size === "md" && 25, size === "lg" && 30, size === "xl" && 40),
						"aria-label": "Default user icon"
					})
				]
			})
		})
	});
};

//#endregion
export { Avatar, getCapitals };
//# sourceMappingURL=index.mjs.map