'use client'
import { CreditCard, Link as LinkIcon, Wallet } from 'lucide-react'
import { Card } from '@/components/ui/card'

interface PaymentMethodCardProps {
  id: string
  icon: string
  label: string
  description: string
  selected: boolean
  onSelect: () => void
}

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  card: CreditCard,
  paypal: Wallet,
  'stripe-link': LinkIcon,
}

export function PaymentMethodCard({
  id,
  icon,
  label,
  description,
  selected,
  onSelect,
}: PaymentMethodCardProps) {
  const IconComponent = iconMap[icon] || CreditCard

  return (
    <Card
      onClick={onSelect}
      className={`cursor-pointer transition-all ${
        selected
          ? 'border-primary bg-primary/5 ring-2 ring-primary/20'
          : 'border-border bg-card hover:border-primary/50'
      }`}
    >
      <div className="p-4 flex items-center gap-4">
        <div
          className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
            selected ? 'border-primary' : 'border-border'
          }`}
        >
          {selected && (
            <div className="w-3 h-3 rounded-full bg-primary" />
          )}
        </div>
        <div className="p-2 bg-card border border-border rounded">
          <IconComponent className="w-5 h-5" />
        </div>
        <div className="flex-1">
          <h4 className="font-semibold text-foreground">{label}</h4>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
    </Card>
  )
}