import { Icon } from "./Icon/Icon.js";
import { toReactNodes } from "../utils/toReactNodes/toReactNodes.js";
import { setDefaultReactNodesTypography } from "../utils/toReactNodes/setReactNodesTypography.js";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/TextIconAligner.tsx
function TextIconAligner({ content: contentProp, typography: typographyProp, rightIcon, leftIcon, onClick }) {
	const defaultTypography = {
		type: typographyProp?.type || "Body",
		size: typographyProp?.size || "Small",
		color: typographyProp?.color || "text"
	};
	const content = toReactNodes(setDefaultReactNodesTypography(contentProp, {
		default: defaultTypography,
		link: {
			...defaultTypography,
			color: "link"
		}
	}));
	const leftIconNode = leftIcon ? /* @__PURE__ */ jsx(Icon, {
		name: leftIcon.name,
		width: leftIcon.width ? leftIcon.width : 12,
		mr: leftIcon.mr || 6,
		color: leftIcon.color
	}) : null;
	const rightIconNode = rightIcon ? /* @__PURE__ */ jsx(Icon, {
		name: rightIcon.name,
		width: rightIcon.width ? rightIcon.width : 12,
		ml: rightIcon.ml || 6,
		color: rightIcon.color
	}) : null;
	return /* @__PURE__ */ jsxs("span", {
		css: {
			cursor: onClick ? "pointer" : "inherit",
			display: "inline-flex",
			alignItems: "center"
		},
		onClick,
		children: [
			leftIconNode,
			content,
			rightIconNode
		]
	});
}
//#endregion
export { TextIconAligner };
