"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { AlertTriangle } from "lucide-react";
import { formatCreditBalance } from "./format";
/**
 * Conditional banner that warns when the available credit balance
 * is below the configured threshold.
 *
 * Renders nothing when the balance is healthy. Not dismissible —
 * it reflects a real account state that the user should address.
 *
 * @example
 * ```tsx
 * <LowBalanceBanner
 *   availableMicros={account.balance.availableMicros}
 *   thresholdMicros={account.lowBalanceThresholdMicros}
 * />
 * ```
 */
export function LowBalanceBanner({ availableMicros, thresholdMicros, className, }) {
    if (availableMicros >= thresholdMicros)
        return null;
    const isZeroOrNegative = availableMicros <= BigInt(0);
    return (_jsxs("div", { role: "alert", className: cn("flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-xs", isZeroOrNegative
            ? "border-destructive/30 bg-destructive/5 text-destructive"
            : "border-warning/30 bg-warning/5 text-warning-foreground", className), children: [_jsx(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: isZeroOrNegative
                            ? "Credit balance exhausted"
                            : "Low credit balance" }), _jsx("p", { className: "mt-0.5 opacity-80", children: isZeroOrNegative
                            ? "Your credit balance is zero. Purchase credits to continue running agent executions."
                            : `Your balance (${formatCreditBalance(availableMicros)}) is below the warning threshold. Consider purchasing additional credits.` })] })] }));
}
//# sourceMappingURL=LowBalanceBanner.js.map