import React from 'react'
import { View, Text } from '@tarojs/components'
import BankCardItem, { BankCardInfo } from './BankCardItem'

interface BankCardInfoProps {
  bankCards: BankCardInfo[] | null
  loading: boolean
}

/**
 * 银行卡信息卡片组件
 * 支持多张银行卡的列表展示
 */
const BankCardInfo: React.FC<BankCardInfoProps> = ({ bankCards, loading }) => {
  if (loading) {
    return (
      <View className="bg-white rounded-lg p-4 mb-3">
        <View className="h-5 bg-gray-200 rounded w-24 mb-4 animate-pulse" />
        <View className="space-y-3">
          {[1, 2].map((i) => (
            <View key={i} className="border-b border-gray-100 py-3">
              <View className="h-4 bg-gray-200 rounded w-3/4 mb-2 animate-pulse" />
              <View className="h-4 bg-gray-200 rounded w-1/2 animate-pulse" />
            </View>
          ))}
        </View>
      </View>
    )
  }

  if (!bankCards || bankCards.length === 0) {
    return (
      <View className="bg-white rounded-lg p-4 mb-3">
        <Text className="text-base font-semibold text-gray-800 mb-4">银行卡信息</Text>
        <Text className="text-gray-500 text-sm">暂无银行卡信息</Text>
      </View>
    )
  }

  return (
    <View className="bg-white rounded-lg p-4 mb-3">
      <Text className="text-base font-semibold text-gray-800 mb-4">银行卡信息</Text>

      <View>
        {bankCards.map((bankCard) => (
          <BankCardItem key={bankCard.id} bankCard={bankCard} />
        ))}
      </View>
    </View>
  )
}

export default BankCardInfo
