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="border-b border-gray-100 last:border-0 py-3">
      <View className="flex flex-col space-y-2">
        {/* 第一行：银行名称 */}
        <View className="flex justify-between items-center">
          <Text className="text-sm font-medium text-gray-800">
            {bankCard.bankName || bankCard.subBankName}
          </Text>
          {bankCard.isDefault === 1 && (
            <View className="bg-blue-50 px-2 py-0.5 rounded">
              <Text className="text-xs text-blue-600">默认</Text>
            </View>
          )}
        </View>

        {/* 第二行：卡号 */}
        <View>
          <Text className="text-sm text-gray-800">
            {maskCardNumber(bankCard.cardNumber)}
          </Text>
        </View>

        {/* 第三行：卡类型 */}
        {bankCard.cardType && (
          <View>
            <Text className="text-xs text-gray-500">{bankCard.cardType}</Text>
          </View>
        )}
      </View>
    </View>
  )
}

export default BankCardItem
