/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { Pressable } from "../Pressable.js";
import { IconSlot } from "../../IconSlot.js";
import { Text } from "../../Text.js";
import { Button } from "../Button.js";
import { useToastConfig } from "./UDSToastConfigProvider.js";
import { ToastContainer } from "./ToastContainer.js";
import { CheckCircle, Cross, Error, Info, Progress, Warning } from "@yahoo/uds-icons";
import { jsx, jsxs } from "react/jsx-runtime";
import { useReducedMotion } from "motion/react";
//#region src/components/client/Toast/Toast.tsx
const iconMap = {
	loading: Progress,
	success: CheckCircle,
	error: Error,
	info: Info,
	warning: Warning
};
/**
* **⚙️️ A single Toast notification.
*
* @componentType Client component
*
* @description
* Toasts are short, non-blocking notifications that appear temporarily to communicate system feedback (success, warning, error, info). They may include an optional action and a dismiss control.
*
* Toasts should never interrupt a user’s task flow. If the user must make a decision or cannot proceed until they acknowledge the message, use a Dialog instead.
*
* @see
* Check out the {@link https://uds.build/docs/components/toast Toast Docs} for more info
*
* @example
* ```tsx
* 'use client';
* import { Toast } from "@yahoo/uds";
*
* <Toast variant="info" message="This is a toast" />
*```
*
* @related [Tooltip](https://uds.build/docs/components/tooltip), [Popover](https://uds.build/docs/components/popover)
**/
const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
	const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = useToastConfig(sizeProp, variantProp);
	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
	const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
	const { className: closeIconClassName, ...closeIconProps } = slotProps?.closeIcon ?? {};
	const reducedMotion = useReducedMotion() || forceReduceMotion;
	const handleClose = () => {
		closeToast?.();
		onClickCloseButton?.(id);
	};
	const classNames = {
		label: getStyles({
			toastSizeLabel: size,
			className: "w-full"
		}),
		icon: getStyles({
			toastVariantIcon: variant,
			toastSizeIcon: size,
			className: variant === "loading" ? "animate-spin" : void 0
		}),
		actionButton: getStyles({
			toastSizeActionButton: size,
			toastVariantActionButton: variant,
			className: "flex-none"
		}),
		closeIconContainer: getStyles({
			spacing: "2",
			borderRadius: "full",
			className: cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring")
		}),
		closeIcon: getStyles({
			toastVariantCloseIcon: variant,
			toastSizeCloseIcon: size
		})
	};
	const iconName = startIcon ?? iconMap[variant];
	return /* @__PURE__ */ jsxs(ToastContainer, {
		size,
		variant,
		className,
		children: [
			iconName && /* @__PURE__ */ jsx(IconSlot, {
				icon: iconName,
				iconProps: {
					color: "inherit",
					variant: iconVariant,
					size: iconSize,
					className: cx(classNames.icon, startIconClassName),
					...startIconProps
				}
			}),
			/* @__PURE__ */ jsx(Text, {
				variant: textVariant,
				color: textColor,
				className: classNames.label,
				...slotProps?.label,
				children: message
			}),
			actionButton && /* @__PURE__ */ jsx(Button, {
				size: buttonSize,
				variant: buttonVariant,
				onClick: onClickActionButton,
				className: classNames.actionButton,
				...slotProps?.actionButton,
				children: actionButton
			}),
			closeIcon && /* @__PURE__ */ jsx(Pressable, {
				onClick: handleClose,
				className: cx(classNames.closeIconContainer, closeIconContainerClassName),
				...closeIconContainerProps,
				children: /* @__PURE__ */ jsx(IconSlot, {
					icon: closeIcon,
					iconProps: {
						color: "inherit",
						className: cx(classNames.closeIcon, closeIconClassName),
						...closeIconProps
					}
				})
			})
		]
	});
};
Toast.displayName = "Toast";
//#endregion
export { Toast };
