import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import { t as getColor } from "../../color.js";
import { t as Icon_default } from "../../Icon.js";
import { t as ArrowUpRight_default } from "../../ArrowUpRight.js";
import { n as useBreakpoint, t as Breakpoint } from "../../useBreakpoint.js";
import { t as ArrowRight_default } from "../../ArrowRight.js";
import { t as Title_default } from "../../Title2.js";
import { t as LazyIllustration_default } from "../../LazyIllustration.js";
import classNames from "classnames";
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
var PromoPanelLink = (props) => {
	if (props.linkComponent) return React.cloneElement(props.linkComponent, void 0, props.children);
	if (props.linkHtmlMarkup === "button") return /* @__PURE__ */ jsx("button", {
		type: "button",
		onClick: props.linkOnClick,
		children: props.children
	});
	return /* @__PURE__ */ jsx("a", {
		href: props.href,
		target: props.target,
		onClick: props.linkOnClick,
		children: props.children
	});
};
var PromoPanel = (props) => {
	const { isHovered, refObject } = usePseudoClasses();
	const { color = "neutral", titleHtmlMarkup = "h2", linkHtmlMarkup = "a" } = props;
	const breakpoint = useBreakpoint();
	const promoPanelClasses = classNames(styles.promopanel, styles[`promopanel--${color}`], !props.illustration && styles["promopanel--no-illustration"]);
	const promoPanelLink = /* @__PURE__ */ jsx(PromoPanelLink, {
		href: props.href,
		target: props.target,
		linkComponent: props.linkComponent,
		linkHtmlMarkup,
		linkOnClick: props.linkOnClick,
		children: props.title || props.children
	});
	const illustrationSize = (() => {
		if (breakpoint >= Breakpoint.md) return 156;
		return 110;
	})();
	return /* @__PURE__ */ jsxs("div", {
		className: promoPanelClasses,
		"data-testid": props.testId,
		"data-analyticsid": AnalyticsId.PromoPanel,
		ref: refObject,
		children: [
			props.illustration && /* @__PURE__ */ jsx(LazyIllustration_default, {
				illustrationName: props.illustration,
				size: illustrationSize,
				color,
				className: styles.promopanel__illustration
			}),
			/* @__PURE__ */ jsxs("div", {
				className: styles.promopanel__content,
				children: [props.title && /* @__PURE__ */ jsx(Title_default, {
					htmlMarkup: titleHtmlMarkup,
					appearance: "title3",
					children: promoPanelLink
				}), !props.title ? promoPanelLink : props.children]
			}),
			/* @__PURE__ */ jsx(Icon_default, {
				className: styles.promopanel__icon,
				svgIcon: props.target === "_blank" ? ArrowUpRight_default : ArrowRight_default,
				size: breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall,
				isHovered,
				color: getColor("blueberry", 500),
				hoverColor: getColor("blueberry", 600)
			})
		]
	});
};
var PromoPanel_default = PromoPanel;
export { PromoPanel_default as default };

//# sourceMappingURL=index.js.map