'use client'

import { CreditCard } from '@/lib/types'
import { Check } from 'lucide-react'

interface MiniCardProps {
  card: CreditCard
  selected?: boolean
  onClick?: () => void
}

export function MiniCard({ card, selected = false, onClick }: MiniCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`flex w-full items-center gap-3 rounded-lg border p-3 text-left transition-all ${
        selected
          ? 'border-indigo-500 bg-indigo-500/20 ring-2 ring-indigo-500/30'
          : 'border-slate-600 bg-slate-800 hover:border-slate-500 hover:bg-slate-700'
      }`}
    >
      {/* Color indicator */}
      <div
        className="h-10 w-10 shrink-0 rounded-lg shadow-inner"
        style={{ backgroundColor: card.color }}
      />

      {/* Card info */}
      <div className="min-w-0 flex-1">
        <p className="truncate font-medium text-white">{card.name}</p>
        <p className="text-sm text-slate-400">**** {card.lastFourDigits}</p>
      </div>

      {/* Selected indicator */}
      {selected && (
        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-indigo-500">
          <Check className="h-4 w-4 text-white" />
        </div>
      )}
    </button>
  )
}