/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx } from "../styles/styler.js";
import { Icon } from "./Icon.js";
import React, { cloneElement, isValidElement, memo } from "react";
import { jsx } from "react/jsx-runtime";
import { isFunction } from "lodash-es";

//#region src/components/IconSlot.tsx
/**
* A helper container to render a SvgIcon, Icon component, or ReactNode.
*
* Useful in components that use icons and have a startIcon and endIcon. It allows
* consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
* need to override props on the icon. For example, pass an `<Icon>` to override
* the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
*
* Examples:
* ```
* <Input startIcon={Info} />
* <Input startIcon={<Icon name={Info} variant="fill" />} />
* <Input startIcon={() => <Icon name={Info} variant="fill" />} />
* <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
* ```
*/
const IconSlot = memo(function IconSlot({ icon, iconProps, className: slotClassName, ...rest }) {
	if (!icon) return null;
	const { className: iconPropsClassName, ...props } = iconProps || {};
	const mergedClassName = cx(slotClassName, iconPropsClassName);
	const svgIcon = icon;
	if (svgIcon.metadata?.isSvgIcon) return /* @__PURE__ */ jsx(Icon, {
		name: svgIcon,
		...props,
		...rest,
		className: mergedClassName
	});
	if (isFunction(icon)) {
		const iconEl = icon(iconProps || {});
		const elProps = iconEl?.props;
		return isValidElement(iconEl) && cloneElement(iconEl, {
			...rest,
			className: cx(mergedClassName, elProps?.className)
		});
	}
	const elProps = icon.props;
	return isValidElement(icon) && cloneElement(icon, {
		...props,
		...elProps,
		...rest,
		className: cx(mergedClassName, elProps.className)
	});
});
IconSlot.displayName = "IconSlot";

//#endregion
export { IconSlot };