'use client'
import { CreditCard, Wallet, Edit, Trash2, Plus } from 'lucide-react'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import type { PaymentMethod } from '@/lib/types'

interface PaymentMethodListProps {
  paymentMethods: PaymentMethod[]
}

export function PaymentMethodList({ paymentMethods }: PaymentMethodListProps) {
  return (
    <Card className="bg-card border-border">
      <CardHeader>
        <CardTitle>Payment Methods</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        {paymentMethods.map((method) => (
          <div
            key={method.id}
            className="flex items-center justify-between p-4 rounded-xl bg-background border border-border"
          >
            <div className="flex items-center gap-4">
              {/* Icon */}
              <div className="p-3 bg-card border border-border rounded-lg">
                {method.type === 'card' ? (
                  <CreditCard className="w-6 h-6 text-foreground" />
                ) : (
                  <Wallet className="w-6 h-6 text-foreground" />
                )}
              </div>

              {/* Details */}
              <div>
                <div className="flex items-center gap-2">
                  <p className="font-semibold text-foreground">
                    {method.type === 'card'
                      ? `${method.brand?.toUpperCase()} •••• ${method.last4}`
                      : `PayPal - ${method.email}`}
                  </p>
                  {method.isDefault && (
                    <Badge className="bg-primary/10 text-primary">Default</Badge>
                  )}
                </div>
              </div>
            </div>

            {/* Actions */}
            <div className="flex gap-2">
              <Button variant="ghost" size="sm">
                <Edit className="w-4 h-4" />
              </Button>
              <Button variant="ghost" size="sm" className="text-red-400 hover:text-red-300">
                <Trash2 className="w-4 h-4" />
              </Button>
            </div>
          </div>
        ))}

        {/* Add New */}
        <Button variant="outline" className="w-full border-border">
          <Plus className="w-4 h-4 mr-2" />
          Add Payment Method
        </Button>
      </CardContent>
    </Card>
  )
}