import { addCommasToDigits } from "../utils/strings.js";
import { link } from "../utils/toReactNodes/nodes.js";
import { Icon } from "./Icon/Icon.js";
import { Label } from "../styles/fields.js";
import { InfoIconTooltip } from "./InfoIconTooltip.js";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/SatoshiInputLabel.tsx
function SatoshiInputLabel({ text, availableSats, showTooltip = true }) {
	const availableSatsTooltipNode = showTooltip ? /* @__PURE__ */ jsxs(Label, {
		style: {
			display: "inline-flex",
			margin: "0 0 0 3px"
		},
		children: [
			"available",
			" ",
			/* @__PURE__ */ jsx(InfoIconTooltip, {
				id: "available-balance-tooltip",
				content: ["Your available balance may differ from your total balance due to operational funds being held on the Lightning Network. ", link({
					text: "Learn more",
					externalLink: "https://docs.lightspark.com/lightspark-sdk/api-reference/types/Balances"
				})]
			})
		]
	}) : null;
	return /* @__PURE__ */ jsxs(Label, { children: [/* @__PURE__ */ jsx("div", { children: text }), /* @__PURE__ */ jsx("div", { children: availableSats !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
		/* @__PURE__ */ jsx(Icon, {
			name: "Satoshi",
			width: 8,
			mr: 4,
			verticalAlign: -2
		}),
		addCommasToDigits(Math.floor(availableSats)),
		availableSatsTooltipNode
	] }) })] });
}
//#endregion
export { SatoshiInputLabel };
