"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { formatCreditBalance } from "./format";
/**
 * Prominent display of the organization's available credit balance.
 *
 * Shows the total available balance as the primary figure, with
 * a secondary breakdown of promotional vs. purchased credits and
 * any reserved amount. Uses semantic colors to indicate balance
 * health: green for healthy, amber for low, red for zero/negative.
 *
 * @example
 * ```tsx
 * <CreditBalanceCard balance={account.balance} isLowBalance={isLow} />
 * ```
 */
export function CreditBalanceCard({ balance, isLowBalance, className, }) {
    const available = balance.availableMicros;
    const zero = BigInt(0);
    const isZeroOrNegative = available <= zero;
    return (_jsxs("div", { className: cn("rounded-lg border border-border bg-card px-4 py-4", className), children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Available Credits" }), _jsx("div", { className: cn("mt-1 text-2xl font-bold tabular-nums", isZeroOrNegative
                    ? "text-destructive"
                    : isLowBalance
                        ? "text-warning-foreground"
                        : "text-foreground"), children: formatCreditBalance(available) }), _jsxs("div", { className: "mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs tabular-nums text-muted-foreground", children: [balance.purchasedMicros > zero && (_jsxs("span", { children: ["Purchased: ", formatCreditBalance(balance.purchasedMicros)] })), balance.promotionalMicros > zero && (_jsxs("span", { children: ["Promotional: ", formatCreditBalance(balance.promotionalMicros)] })), balance.reservedMicros > zero && (_jsxs("span", { children: ["Reserved: ", formatCreditBalance(balance.reservedMicros)] }))] })] }));
}
//# sourceMappingURL=CreditBalanceCard.js.map