"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { BillingAccountStatus } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
import { CREDIT_PACKS, formatPackPrice, formatCreditCount, } from "./credit-packs";
/**
 * Grid of credit pack cards with purchase buttons.
 *
 * Displays the 3 self-serve credit packs (Starter, Growth, Team)
 * in a responsive grid. Each card shows the pack name, price,
 * credit count, and a buy button. Buttons are disabled when the
 * account is suspended/closed or a purchase is in progress.
 *
 * @example
 * ```tsx
 * <CreditPackGrid
 *   accountStatus={account.status}
 *   purchasingPackId={isSubmitting ? activePackId : null}
 *   onPurchase={(packId) => createSession({ orgId, packId, ... })}
 * />
 * ```
 */
export function CreditPackGrid({ accountStatus, purchasingPackId, onPurchase, className, }) {
    const isAccountActive = accountStatus === BillingAccountStatus.billing_account_active;
    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-xs font-semibold text-foreground", children: "Purchase Credits" }), _jsx("div", { className: cn("grid gap-3 sm:grid-cols-3", className), role: "group", "aria-label": "Credit packs", children: CREDIT_PACKS.map((pack) => (_jsx(PackCard, { pack: pack, isPurchasing: purchasingPackId === pack.packId, isDisabled: !isAccountActive || purchasingPackId != null, onPurchase: onPurchase }, pack.packId))) }), !isAccountActive && (_jsxs("p", { className: "mt-2 text-xs text-muted-foreground", children: ["Credit purchases are unavailable while your billing account is", " ", accountStatus === BillingAccountStatus.billing_account_suspended
                        ? "suspended"
                        : "closed", "."] }))] }));
}
// ---------------------------------------------------------------------------
// PackCard (internal)
// ---------------------------------------------------------------------------
function PackCard({ pack, isPurchasing, isDisabled, onPurchase, }) {
    return (_jsxs("div", { className: "flex flex-col rounded-lg border border-border bg-card px-4 py-4", children: [_jsx("div", { className: "text-sm font-semibold text-foreground", children: pack.displayName }), _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: pack.description }), _jsx("div", { className: "mt-3 flex items-baseline gap-1", children: _jsx("span", { className: "text-xl font-bold tabular-nums text-foreground", children: formatPackPrice(pack.priceCents) }) }), _jsxs("div", { className: "mt-0.5 text-xs tabular-nums text-muted-foreground", children: [formatCreditCount(pack.credits), " credits"] }), _jsx("button", { type: "button", disabled: isDisabled, onClick: () => onPurchase(pack.packId), className: cn("mt-4 w-full rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-primary text-primary-foreground", "hover:bg-primary/90", "disabled:pointer-events-none disabled:opacity-50"), "aria-busy": isPurchasing, children: isPurchasing ? "Redirecting\u2026" : "Buy" })] }));
}
//# sourceMappingURL=CreditPackGrid.js.map