"use client"

import { Card } from "@/components/ui/card"
import { CreditCard, Lock, Shield } from "lucide-react"
import { StripePaymentForm, StripePaymentFormSkeleton } from "@/components/stripe-payment-form"
import { PayPalPaymentForm, PayPalPaymentFormSkeleton } from "@/components/paypal-payment-form"

interface PaymentSectionProps {
  provider: "stripe" | "paypal"
  // Stripe props
  clientSecret?: string
  onReady?: () => void
  // PayPal props
  paypalOrderId?: string
  token?: string
  onPayPalApprove?: (captureId: string) => void
  onPayPalError?: (error: string) => void
}

export function PaymentSection({
  provider,
  clientSecret,
  onReady,
  paypalOrderId,
  token,
  onPayPalApprove,
  onPayPalError,
}: PaymentSectionProps) {
  return (
    <Card className="p-10 shadow-elevated border-primary/20 bg-gradient-to-br from-card to-card/50 focus-within:border-primary/40 transition-all duration-500">
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-3">
          <div className="h-12 w-12 rounded-xl bg-primary/15 flex items-center justify-center">
            <CreditCard className="h-6 w-6 text-primary" />
          </div>
          <h2 className="text-3xl font-bold text-foreground tracking-tight">Payment</h2>
        </div>
        <p className="text-sm text-muted-foreground">Complete your transaction securely</p>
      </div>

      {/* Payment Form */}
      <div id="payment-element" className="min-h-[240px]">
        {provider === "stripe" ? (
          clientSecret ? (
            <StripePaymentForm onReady={onReady} />
          ) : (
            <StripePaymentFormSkeleton />
          )
        ) : paypalOrderId && token && onPayPalApprove && onPayPalError ? (
          <PayPalPaymentForm
            paypalOrderId={paypalOrderId}
            token={token}
            onApprove={onPayPalApprove}
            onError={onPayPalError}
          />
        ) : (
          <PayPalPaymentFormSkeleton />
        )}
      </div>

      {/* Premium trust signals */}
      <div className="mt-8 pt-8 border-t border-border/50">
        <div className="grid grid-cols-2 gap-6">
          <div className="flex items-start gap-3">
            <div className="h-9 w-9 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0">
              <Lock className="h-4 w-4 text-accent-foreground" />
            </div>
            <div>
              <p className="text-sm font-medium text-foreground">256-bit Encryption</p>
              <p className="text-xs text-muted-foreground mt-1">Bank-level security</p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="h-9 w-9 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0">
              <Shield className="h-4 w-4 text-accent-foreground" />
            </div>
            <div>
              <p className="text-sm font-medium text-foreground">PCI Compliant</p>
              <p className="text-xs text-muted-foreground mt-1">Industry standard</p>
            </div>
          </div>
        </div>
      </div>
    </Card>
  )
}