import { elide } from "../utils/strings.js";
import { Link } from "../router.js";
import { getFocusOutline } from "../styles/common.js";
import { UnstyledButton } from "./UnstyledButton.js";
import { TextIconAligner } from "./TextIconAligner.js";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/TextButton.tsx
function TextButton({ text: textProp, to, href, toParams, onClick, rightIcon, leftIcon, elide: elideArgs, disabled = false, mt = 0, ml = 0, mr = 0, padding = "0", iconMatchTextColor = false, typography }) {
	const text = elideArgs ? elide(textProp, elideArgs) : textProp;
	let rightIconProp = rightIcon;
	if (typeof rightIcon === "undefined" && typeof leftIcon === "undefined") rightIconProp = { name: "ArrowRight" };
	const defaultIconColor = iconMatchTextColor ? void 0 : "mcNeutral";
	const content = /* @__PURE__ */ jsx(TextIconAligner, {
		onClick,
		leftIcon: leftIcon ? {
			name: leftIcon.name,
			color: leftIcon.color || defaultIconColor,
			width: leftIcon.width
		} : null,
		content: text,
		typography: {
			size: "ExtraSmall",
			...typography
		},
		rightIcon: rightIconProp ? {
			name: rightIconProp.name,
			color: rightIconProp.color || defaultIconColor,
			width: rightIconProp.width
		} : null
	});
	const commonProps = {
		type: "button",
		onClick,
		disabled,
		padding,
		css: {
			marginTop: mt ? `${mt}px` : void 0,
			marginLeft: ml ? `${ml}px` : void 0,
			marginRight: mr ? `${mr}px` : void 0
		}
	};
	if (to) return /* @__PURE__ */ jsx(ButtonLink, {
		...commonProps,
		to,
		params: toParams,
		children: content
	});
	return href ? /* @__PURE__ */ jsx(ButtonHrefLink, {
		...commonProps,
		href,
		target: "_blank",
		children: content
	}) : /* @__PURE__ */ jsx(StyledButton, {
		...commonProps,
		children: content
	});
}
const buttonStyle = ({ theme, disabled, padding }) => css`
  display: inline-flex;
  opacity: ${disabled ? .2 : 1};
  align-items: center;
  transition: opacity 0.2s;
  padding: ${padding};

  &:focus-visible {
    outline: ${getFocusOutline({ theme })};
  }

  & > * {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    cursor: ${disabled ? "not-allowed" : "pointer"};
  }
`;
const StyledButton = styled(UnstyledButton)`
  ${(props) => buttonStyle(props)}
`;
const ButtonLink = styled(Link)`
  ${(props) => buttonStyle(props)}
`;
const ButtonHrefLink = styled.a`
  ${(props) => buttonStyle(props)}
`;
//#endregion
export { TextButton };
