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

//#region src/components/Link.tsx
/**
* A Link provides navigation or actionable functionality by linking users to
* another location within an application, an external resource, or triggering
* specific in-page interactions (i.e. scroll-to-section).
*
* @componentType Client component
*
* @description
* A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
*
* @see
* Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
*
* @usage
* - Provide a way for users to navigate to another location.
* - Provide a trigger for in-page interactions.
*
* @example
* ```tsx
* 'use client';
* import { Link } from '@yahoo/uds';
* import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
*
* <Link href="#">My Link</Link>
* <Link href="#" startIcon={Share} />
* <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
*```
**/
const Link = forwardRef(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className, ...anchorProps }, ref) {
	const shouldSizeRelativeToContainingText = !textVariant;
	const rootClasses = useMemo(() => {
		return getStyles({
			linkVariantRoot: variant,
			display: "inline-flex",
			alignItems: "center",
			className: cx(!shouldSizeRelativeToContainingText && getStyles({
				linkTextStyleRoot: textVariant,
				fontSize: textVariant,
				fontFamily: textVariant,
				fontWeight: textVariant,
				lineHeight: textVariant,
				textTransform: textVariant
			}), "uds-ring", alwaysUnderline && "underline", className)
		});
	}, [
		alwaysUnderline,
		shouldSizeRelativeToContainingText,
		textVariant,
		variant,
		className
	]);
	const iconStartStyles = getStyles({
		linkVariantIconStart: variant,
		linkTextStyleIcon: textVariant,
		className: cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
	});
	const iconEndStyles = getStyles({
		linkVariantIconEnd: variant,
		linkTextStyleIcon: textVariant,
		className: cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
	});
	const iconProps = {
		variant: "outline",
		color: "current"
	};
	return /* @__PURE__ */ jsxs("a", {
		ref,
		className: rootClasses,
		...anchorProps,
		children: [
			startIcon && /* @__PURE__ */ jsx(IconSlot, {
				className: iconStartStyles,
				icon: startIcon,
				iconProps,
				"data-testid": "start-icon"
			}),
			children,
			endIcon && /* @__PURE__ */ jsx(IconSlot, {
				className: iconEndStyles,
				icon: endIcon,
				iconProps,
				"data-testid": "end-icon"
			})
		]
	});
});
Link.displayName = "Link";

//#endregion
export { Link };