"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../styles/styler.js";
import { HStack } from "../HStack.js";
import { IconSlot } from "../IconSlot.js";
import React, { forwardRef, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/client/Badge.tsx
const BASE_CLASS = "uds-badge";
const VARIANT_BASE_CLASS = "uds-badge-variant";
const SIZE_BASE_CLASS = "uds-badge-size";
const ICON_SIZE_BASE_CLASS = "uds-badge-iconSize";
const ICON_COLOR_BASE_CLASS = "uds-badge-iconColor";
const MAX_WIDTH_DEFAULT = 200;
/**
* **⚙️️ A badge.
*
* @componentType Client component
*
* @description
* Badges show notifications, counts, or status information on navigation items and icons.
*
* @see
* Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
*
* @usage
* - ???
*
* @example
* ```tsx
* 'use client';
* import { Badge } from "@yahoo/uds";
*
* <Badge>Label</Badge>
*```
*
* @related [Chip](https://uds.build/docs/components/chip).
**/
const Badge = forwardRef(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className, ...rest }, ref) {
	const rootStyles = getStyles({
		badgeSizeRoot: size,
		badgeVariantRoot: variant,
		className: cx([
			BASE_CLASS,
			VARIANT_BASE_CLASS,
			SIZE_BASE_CLASS,
			className
		])
	});
	const iconStyles = getStyles({
		badgeVariantIcon: variant,
		badgeSizeIcon: size,
		className: cx([ICON_SIZE_BASE_CLASS, ICON_COLOR_BASE_CLASS])
	});
	const containerStyles = useMemo(() => ({
		...minWidth ? { minWidth: `${minWidth}px` } : {},
		...maxWidth === "full" ? {} : { maxWidth: `${maxWidth}px` },
		...backgroundColor ? { backgroundColor } : {},
		...borderColor ? { borderColor } : {},
		...color ? { color } : {}
	}), [
		backgroundColor,
		borderColor,
		color,
		maxWidth,
		minWidth
	]);
	const iconProps = useMemo(() => ({
		variant: "fill",
		style: { ...iconColor ? { color: iconColor } : {} }
	}), [iconColor]);
	return /* @__PURE__ */ jsxs(HStack, {
		ref,
		gap: "2",
		display: "inline-flex",
		alignItems: "center",
		className: rootStyles,
		style: containerStyles,
		...rest,
		children: [
			startIcon && /* @__PURE__ */ jsx(IconSlot, {
				icon: startIcon,
				iconProps,
				"data-testid": "start-icon",
				className: iconStyles
			}),
			/* @__PURE__ */ jsx("span", {
				className: "flex-1 truncate whitespace-nowrap text-center",
				children
			}),
			endIcon && /* @__PURE__ */ jsx(IconSlot, {
				icon: endIcon,
				iconProps,
				"data-testid": "end-icon",
				className: iconStyles
			})
		]
	});
});
Badge.displayName = "Badge";

//#endregion
export { Badge };