"use client";

import { useRouter } from "next/navigation";
import type { Payment } from "@/types/order";
import { PaymentMethodSelector } from "./payment-method-selector";
import { PaymentInstructions } from "./payment-instructions";

/**
 * The whole "pay this order" step: shows the method selector until a charge
 * exists, then the QR/VA instructions for it. Default `onCharged` behavior
 * is `router.refresh()` — for a Server-Component-backed page, that re-fetches
 * the Order and passes the new payment back down as a prop. Callers that
 * hold their own client-side Order state (e.g. the Signature wizard) should
 * pass an explicit `onCharged` instead of relying on the refresh default.
 */
export function PaymentStep({
  orderId,
  latestPayment,
  onCharged,
}: {
  orderId: number;
  latestPayment: Payment | null;
  onCharged?: (payment: Payment) => void;
}) {
  const router = useRouter();

  if (!latestPayment) {
    return <PaymentMethodSelector orderId={orderId} onCharged={onCharged ?? (() => router.refresh())} />;
  }

  return <PaymentInstructions payment={latestPayment} />;
}