import React from 'react'
import { View, Text } from '@tarojs/components'
import { maskCardNumber } from '../utils/maskUtils'

/**
 * 银行卡信息类型（从RPC推断）
 */
export interface BankCardInfo {
  id: number
  subBankName: string
  bankName: string | null
  cardNumber: string
  cardholderName: string
  cardType: string | null
  isDefault: number
  fileUrl: string | null
}

interface BankCardItemProps {
  bankCard: BankCardInfo
}

/**
 * 银行卡列表项组件
 * 显示：银行名称、卡号脱敏、卡类型、是否默认
 */
const BankCardItem: React.FC<BankCardItemProps> = ({ bankCard }) => {
  return (
    <View className="bg-blue-50 rounded-lg p-4 mb-3 last:mb-0">
      <View className="flex flex-col">
        {/* 第一行：银行名称和默认标签 */}
        <View className="flex justify-between items-center mb-2">
          <Text className="font-medium text-gray-800">
            {bankCard.bankName || bankCard.subBankName}
          </Text>
          {bankCard.isDefault === 1 && (
            <View className="bg-blue-100 px-2 py-1 rounded-full">
              <Text className="text-xs text-blue-800">默认</Text>
            </View>
          )}
        </View>

        {/* 第二行：卡类型 */}
        {bankCard.cardType && (
          <View className="mb-1">
            <Text className="text-sm text-gray-600">{bankCard.cardType}</Text>
          </View>
        )}

        {/* 第三行：卡号 (大号加粗) */}
        <View className="mb-1">
          <Text className="text-lg font-bold text-gray-800">
            {maskCardNumber(bankCard.cardNumber)}
          </Text>
        </View>

        {/* 第四行：持卡人姓名 */}
        <View className="mt-2">
          <Text className="text-sm text-gray-600">持卡人：{bankCard.cardholderName}</Text>
        </View>
      </View>
    </View>
  )
}

export default BankCardItem
