import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import DocumentPhotoItem, { PhotoInfo } from './DocumentPhotoItem'

interface DocumentPhotosProps {
  photos: PhotoInfo[] | null
  loading: boolean
}

/**
 * 证件照片卡片组件
 * 网格布局展示证件照片
 */
const DocumentPhotos: React.FC<DocumentPhotosProps> = ({ photos, 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="grid grid-cols-2 gap-3">
          {[1, 2, 3, 4].map((i) => (
            <View key={i} className="aspect-square bg-gray-200 rounded-lg animate-pulse" />
          ))}
        </View>
      </View>
    )
  }

  if (!photos || photos.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 className="grid grid-cols-2 gap-3">
        {photos.map((photo) => (
          <DocumentPhotoItem key={photo.id} photo={photo} />
        ))}
      </View>
    </View>
  )
}

export default DocumentPhotos
