import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import { n as mergeRefs } from "../../refs.js";
import { t as Icon_default } from "../../Icon.js";
import { t as LazyIcon_default } from "../../LazyIcon.js";
import { t as isComponent } from "../../component.js";
import { n as useBreakpoint, t as Breakpoint } from "../../useBreakpoint.js";
import classNames from "classnames";
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import tileStyles from "./styles.module.scss";
var Title = (props) => {
	const { compact, children, className, htmlMarkup = "span", highlighted, ref } = props;
	return /* @__PURE__ */ jsx(htmlMarkup, {
		className: classNames(tileStyles["tile__title"], {
			[tileStyles["tile__title--highlighted"]]: highlighted,
			[tileStyles["tile__title--compact"]]: compact
		}, className),
		ref,
		children
	});
};
Title.displayName = "Title";
const Tile = (props) => {
	const { children, icon, title, className = "", description, fixed = false, highlighted = false, testId, target, rel, variant = "normal", href, onClick, ref } = props;
	const { refObject, isHovered } = usePseudoClasses();
	const mobile = useBreakpoint() < Breakpoint.md;
	const compact = variant === "compact";
	const tileClasses = classNames(tileStyles.tile, {
		[tileStyles["tile--fixed"]]: fixed,
		[tileStyles["tile--compact"]]: compact,
		[tileStyles["tile--highlighted"]]: highlighted
	}, className);
	const tileTitleWrapperClasses = classNames(tileStyles["title-wrapper"], { [tileStyles["title-wrapper--compact"]]: compact });
	return /* @__PURE__ */ jsxs("a", {
		ref: mergeRefs([ref, refObject]),
		href,
		target,
		rel: target === "_blank" ? "noopener noreferrer" : rel,
		className: tileClasses,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Tile,
		onClick,
		children: [
			/* @__PURE__ */ jsxs("div", {
				className: tileTitleWrapperClasses,
				children: [(isComponent(icon, Icon_default) || isComponent(icon, LazyIcon_default)) && React.cloneElement(icon, {
					size: mobile ? IconSize.Small : IconSize.Medium,
					isHovered,
					color: highlighted ? "white" : "black"
				}), isComponent(title, Tile.Title) && React.cloneElement(title, {
					highlighted,
					compact
				})]
			}),
			!compact && !mobile && /* @__PURE__ */ jsx("p", {
				className: tileStyles.tile__description,
				children: description
			}),
			children && /* @__PURE__ */ jsx("div", {
				className: tileStyles.tile__children,
				children
			})
		]
	});
};
Tile.displayName = "Tile";
Tile.Title = Title;
var Tile_default = Tile;
export { Tile, Tile_default as default };

//# sourceMappingURL=index.js.map