"use client"

import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CreditCard, Plus, Check } from "lucide-react"
import { cn } from "@/lib/utils"

interface BillingMethod {
  id: string
  cardType: string
  last4: string
  expMonth: string
  expYear: string
  isDefault: boolean
}

interface BillingMethodSelectorProps {
  billingMethods: BillingMethod[]
  selectedId: string | null
  onSelect: (id: string) => void
  onAdd: () => void
}

export function BillingMethodSelector({ billingMethods, selectedId, onSelect, onAdd }: BillingMethodSelectorProps) {
  return (
    <div className="space-y-3">
      {billingMethods.map((method) => (
        <Card
          key={method.id}
          className={cn(
            "p-4 cursor-pointer transition-all",
            selectedId === method.id ? "border-primary bg-primary/5 ring-2 ring-primary" : "hover:border-primary/50",
          )}
          onClick={() => onSelect(method.id)}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <CreditCard className="h-5 w-5 text-primary" />
              </div>
              <div>
                <p className="font-medium">
                  {method.cardType.charAt(0).toUpperCase() + method.cardType.slice(1)} •••• {method.last4}
                </p>
                <p className="text-sm text-muted-foreground">
                  Expires {method.expMonth}/{method.expYear}
                </p>
              </div>
            </div>
            {selectedId === method.id && <Check className="h-5 w-5 text-primary" />}
          </div>
        </Card>
      ))}

      <Button variant="outline" className="w-full bg-transparent" onClick={onAdd}>
        <Plus className="mr-2 h-4 w-4" />
        Add New Payment Method
      </Button>
    </div>
  )
}