"use client"

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

interface PaymentSectionProps {
  clientSecret?: string
  onReady?: () => void
}

export function PaymentSection({ clientSecret, onReady }: 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>

      {/* Stripe Payment Element */}
      <div id="payment-element" className="min-h-[240px]">
        {clientSecret ? (
          <StripePaymentForm onReady={onReady} />
        ) : (
          <StripePaymentFormSkeleton />
        )}
      </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>
  )
}
