'use client';

import { PaymentOrder } from '@/lib/payment-api';

interface PaymentSuccessProps {
  order: PaymentOrder;
  paymentUrl?: string;
  onContinue?: () => void;
}

export function PaymentSuccess({ order, paymentUrl, onContinue }: PaymentSuccessProps) {
  return (
    <div className="max-w-md mx-auto p-6 text-center">
      <div className="text-6xl mb-4">✅</div>
      <h2 className="text-2xl font-bold mb-2">支付成功</h2>
      <p className="text-gray-600 mb-4">订单号: {order.orderNo}</p>
      <div className="text-3xl font-bold text-green-600 mb-6">
        ¥{order.amount.toFixed(2)}
      </div>

      {paymentUrl && (
        <div className="mb-6">
          <a
            href={paymentUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-block px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
          >
            前往支付
          </a>
        </div>
      )}

      {onContinue && (
        <button
          onClick={onContinue}
          className="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
        >
          继续
        </button>
      )}
    </div>
  );
}