import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'

/**
 * 证件照片信息类型（从RPC推断）
 */
export interface PhotoInfo {
  id: number
  photoType: string
  fileUrl: string | null
  fileName: string | null
  uploadTime: string
  canDownload: number
}

interface DocumentPhotoItemProps {
  photo: PhotoInfo
}

/**
 * 证件照片列表项组件
 * 支持点击照片预览功能
 */
const DocumentPhotoItem: React.FC<DocumentPhotoItemProps> = ({ photo }) => {
  const handlePreview = () => {
    if (!photo.fileUrl) return

    Taro.previewImage({
      current: photo.fileUrl,
      urls: [photo.fileUrl]
    })
  }

  return (
    <View
      onClick={handlePreview}
      className="border border-gray-200 rounded-lg p-3 text-center cursor-pointer"
    >
      <View className="w-full aspect-square bg-gray-100 rounded-lg overflow-hidden mx-auto mb-2">
        {photo.fileUrl ? (
          <Image
            src={photo.fileUrl}
            mode="aspectFill"
            className="w-full h-full"
            lazyLoad
          />
        ) : (
          <View className="w-full h-full flex items-center justify-center">
            <View className="i-heroicons-document-20-solid text-gray-400 text-2xl" />
          </View>
        )}
      </View>
      <Text className="text-xs text-gray-600 text-center line-clamp-1">
        {photo.photoType || photo.fileName || '未知'}
      </Text>
    </View>
  )
}

export default DocumentPhotoItem
