import { a as IconSize, n as AnalyticsId } from "./constants2.js";
import { t as Icon_default } from "./Icon.js";
import { t as LazyIcon_default } from "./LazyIcon.js";
import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
import { t as Title_default } from "./Title2.js";
import classNames from "classnames";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/HighlightPanel/styles.module.scss";
var HighlightPanel = (props) => {
	const { children, color = "white", testId, svgIcon, htmlMarkup = "div", className, variant = "normal", title, titleHtmlMarkup = "h2" } = props;
	const breakpoint = useBreakpoint();
	const containerClassName = classNames(styles.highlightpanel, styles[`highlightpanel--${color}`], svgIcon && styles["highlightpanel--has-icon"], className, { [styles["highlightpanel--compact"]]: variant === "compact" });
	const renderContent = () => {
		const titleElement = title && /* @__PURE__ */ jsx(Title_default, {
			testId: "titleId",
			htmlMarkup: titleHtmlMarkup,
			appearance: variant === "compact" ? "title6" : "title4",
			children: title
		});
		if (svgIcon) {
			const iconSize = IconSize.Small;
			if (variant === "compact") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
				className: classNames(styles.highlightpanel__icon, styles["highlightpanel__icon--compact"]),
				children: typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
					iconName: svgIcon,
					size: iconSize
				}) : /* @__PURE__ */ jsx(Icon_default, {
					svgIcon,
					size: iconSize
				})
			}), /* @__PURE__ */ jsxs("div", {
				className: (styles.highlightpanel__content, styles["highlightpanel__content--compact"]),
				children: [title && /* @__PURE__ */ jsx("div", {
					className: styles["highlightpanel__title-wrapper"],
					children: titleElement
				}), /* @__PURE__ */ jsx("div", {
					className: styles["highlightpanel__content__children--compact"],
					children
				})]
			})] });
			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
				className: styles.highlightpanel__icon,
				children: [typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
					iconName: svgIcon,
					size: iconSize
				}) : /* @__PURE__ */ jsx(Icon_default, {
					svgIcon,
					size: iconSize
				}), title && breakpoint < Breakpoint.md && /* @__PURE__ */ jsx("div", {
					className: styles["highlightpanel__title-wrapper"],
					children: titleElement
				})]
			}), /* @__PURE__ */ jsxs("div", {
				className: styles.highlightpanel__content,
				children: [title && breakpoint >= Breakpoint.md && /* @__PURE__ */ jsx("div", {
					className: styles["highlightpanel__title-wrapper"],
					children: titleElement
				}), children]
			})] });
		}
		return /* @__PURE__ */ jsxs(Fragment, { children: [title && /* @__PURE__ */ jsx("div", {
			className: styles.highlightpanel__content,
			children: /* @__PURE__ */ jsx("div", { children: titleElement })
		}), children] });
	};
	return /* @__PURE__ */ jsx(htmlMarkup, {
		className: containerClassName,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.HighlightPanel,
		children: renderContent()
	});
};
var HighlightPanel_default$1 = HighlightPanel;
export { HighlightPanel_default$1 as t };

//# sourceMappingURL=HighlightPanel.js.map