import { getColor } from "../styles/themes.js";
import { standardBorderRadius } from "../styles/common.js";
import { Icon } from "./Icon/Icon.js";
import { toReactNodes } from "../utils/toReactNodes/toReactNodes.js";
import { setDefaultReactNodesTypography } from "../utils/toReactNodes/setReactNodesTypography.js";
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/Badge.tsx
function Badge({ content: contentProp, kind, icon, ml = 0, mr = 0, size = "sm", block = false, typography: typographyProp }) {
	const content = toReactNodes(setDefaultReactNodesTypography(contentProp, { default: {
		type: typographyProp?.type || "Label Moderate",
		size: typographyProp?.size || "Small",
		color: typographyProp?.color || (kind === "danger" ? "danger" : kind === "success" ? "white" : "text")
	} }));
	return contentProp ? /* @__PURE__ */ jsxs(StyledBadge, {
		kind,
		ml,
		mr,
		size,
		block,
		children: [icon ? /* @__PURE__ */ jsx(Icon, {
			name: icon.name,
			width: 20,
			color: icon.color ? icon.color : kind === "danger" ? "danger" : kind === "success" ? "success" : void 0
		}) : null, /* @__PURE__ */ jsx(BadgeContent, { children: content })]
	}) : null;
}
const badgeSmVPadding = 2;
const badgeSmHPadding = 6;
const StyledBadge = styled.div`
  ${({ size }) => standardBorderRadius(size === "sm" ? 4 : 12)}
  ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
  ${({ mr }) => mr === 0 ? "" : `margin-right: ${mr}px;`}

  display: ${({ block }) => block ? "flex" : "inline-flex"};
  gap: ${({ size }) => size === "sm" ? badgeSmHPadding : 12}px;
  align-items: center;
  padding: ${({ size }) => size === "sm" ? `2px ${badgeSmHPadding}px` : "12px 16px"};
  background-color: ${({ theme, kind }) => {
	if (kind === "danger") return getColor(theme, "red42a10");
	else if (kind === "success") return getColor(theme, "success");
	else return getColor(theme, theme.badge.bg);
}};
`;
const BadgeContent = styled.div``;
//#endregion
export { Badge, badgeSmVPadding };
