import { Rocket, Lock, ShieldCheck } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Button } from '@/components/ui/button'

interface CheckoutSummaryProps {
  serviceName: string
  tier: string
  price: number
  currency: string
}

export function CheckoutSummary({ serviceName, tier, price, currency }: CheckoutSummaryProps) {
  const vat = Math.round(price * 0.2)
  const total = price + vat

  return (
    <Card className="bg-card border-border">
      <CardHeader>
        <CardTitle>Order Summary</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-6">
        {/* Selected Service */}
        <div className="flex items-start gap-4 pb-4 border-b border-border">
          <div className="p-3 bg-primary/10 text-primary rounded-lg">
            <Rocket className="w-6 h-6" />
          </div>
          <div className="flex-1">
            <h4 className="font-semibold text-foreground">{serviceName}</h4>
            <p className="text-sm text-muted-foreground capitalize">{tier} Tier</p>
          </div>
          <p className="font-bold text-foreground">
            {price} {currency}
          </p>
        </div>

        {/* Price Breakdown */}
        <div className="flex flex-col gap-3">
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Subtotal</span>
            <span className="text-foreground">
              {price} {currency}
            </span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">VAT (20%)</span>
            <span className="text-foreground">
              {vat} {currency}
            </span>
          </div>
          <Separator />
          <div className="flex justify-between">
            <span className="font-bold text-foreground">Total</span>
            <span className="font-bold text-xl text-foreground">
              {total} {currency}
            </span>
          </div>
        </div>

        {/* Complete Purchase Button */}
        <Button className="glow-button bg-primary hover:bg-primary-glow text-white w-full text-lg font-bold h-12">
          Complete Purchase
        </Button>

        {/* Trust Badges */}
        <div className="flex items-center justify-center gap-4 text-xs text-muted-foreground">
          <div className="flex items-center gap-1">
            <Lock className="w-4 h-4" />
            <span>Secure Payment</span>
          </div>
          <div className="flex items-center gap-1">
            <ShieldCheck className="w-4 h-4" />
            <span>SSL Encrypted</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}