import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "@emotion/styled";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { formatNumber } from "../../../../../../utils/formatNumber.js";
import { fontSize, iconSize, radius, spacing, } from "../../../../../core/design-system/index.js";
import { Skeleton } from "../../../components/Skeleton.js";
import { Container } from "../../../components/basic.js";
import { Button } from "../../../components/buttons.js";
import { Text } from "../../../components/text.js";
/**
 * Shows an amount "value" and renders the selected token and chain
 * It also renders the buttons to select the token and chain
 * It also renders the balance of active wallet for the selected token in selected chain
 * @internal
 */
export function PayWithCreditCard(props) {
    return (_jsxs(Container, { bg: "tertiaryBg", borderColor: "borderColor", flex: "row", style: {
            borderRadius: radius.md,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            borderWidth: "1px",
            borderStyle: "solid",
            borderBottom: "none",
            flexWrap: "nowrap",
            justifyContent: "space-between",
            alignItems: "center",
        }, children: [_jsxs(CurrencyButton, { disabled: props.disableCurrencySelection, variant: "ghost", onClick: props.onSelectCurrency, style: {
                    minHeight: "64px",
                    justifyContent: "flex-start",
                    minWidth: "50%",
                }, gap: "sm", children: [_jsx(props.currency.icon, { size: iconSize.md }), _jsxs(Container, { flex: "row", center: "y", gap: "xxs", children: [_jsx(Text, { color: "primaryText", children: props.currency.shorthand }), !props.disableCurrencySelection && (_jsx(ChevronDownIcon, { width: iconSize.sm, height: iconSize.sm }))] })] }), _jsx("div", { style: {
                    flexGrow: 1,
                    flexShrink: 1,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "flex-end",
                    gap: spacing.xxs,
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    justifyContent: "center",
                    paddingRight: spacing.sm,
                }, children: props.isLoading ? (_jsx(Skeleton, { width: "100px", height: fontSize.lg })) : (_jsx(Text, { size: "lg", color: props.value ? "primaryText" : "secondaryText", children: props.value ? `${formatNumber(Number(props.value), 4)}` : "--" })) })] }));
}
const CurrencyButton = /* @__PURE__ */ styled(Button)(() => {
    return {
        "&[disabled]:hover": {
            borderColor: "transparent",
        },
    };
});
//# sourceMappingURL=PayWIthCreditCard.js.map