"use client";

import { useState } from "react";
import { initPaddle } from "@/lib/paddle";

/* Opens the Paddle overlay with the resolved line items and custom_data. The
 * items come from the configurator via catalogue pricing; custom_data is what
 * lets the webhook route without a lookup table. */
export function CheckoutButton({
    items,
    customData,
    disabled,
    label = "Continue to payment",
}: {
    items: { priceId: string; quantity: number }[];
    customData: { account_id: string; instance_id: string };
    disabled?: boolean;
    label?: string;
}) {
    const [busy, setBusy] = useState(false);
    async function open() {
        setBusy(true);
        const paddle = await initPaddle();
        setBusy(false);
        paddle?.Checkout.open({
            items: items.map((i) => ({ priceId: i.priceId, quantity: i.quantity })),
            customData,
        });
    }
    return (
        <button
            type="button"
            disabled={disabled || busy || items.length === 0}
            onClick={open}
            className="rounded border border-accent/50 px-3 py-1.5 text-[0.85rem] text-accent disabled:opacity-40"
        >
            {busy ? "Opening…" : label}
        </button>
    );
}