import { View, Text, Image } from '@tarojs/components'
import './index.scss'

interface ListItemProps {
  title: string
  dateTime: string
  location: string
  distance: string
  registeredCount: number
  maxCount: number
  skillLevel: string
  matchType: string
  images: string[]
}

const ListItem: React.FC<ListItemProps> = ({
  title,
  dateTime,
  location,
  distance,
  registeredCount,
  maxCount,
  skillLevel,
  matchType,
  images
}) => {
  // 根据图片数量决定展示样式
  const renderImages = () => {
    if (images.length === 0) return null
    
    if (images.length === 1) {
      return (
        <View className="single-image">
          <View className="image-container"> 
            <Image src={images[0]} className="image" mode="aspectFill" />
          </View>
        </View>
      )
    }
    
    if (images.length === 2) {
      return (
        <View className="double-image">
          <View className="image-container">
            <Image src={images[0]} className="image" mode="aspectFill" />
          </View>
          <View className="image-container">
            <Image src={images[1]} className="image" mode="aspectFill" />
          </View>
        </View>
      )
    }
    
    // 3张或更多图片
    return (
      <View className="triple-image">
        <View className="image-container">
          <Image src={images[0]} className="image" mode="aspectFill" />
        </View>
        <View className="image-container">
          <Image src={images[1]} className="image" mode="aspectFill" />
        </View>
        <View className="image-container">
          <Image src={images[2]} className="image" mode="aspectFill" />
        </View>
      </View>
    )
  }

  return (
    <View className="list-item">
      {/* 左侧内容区域 */}
      <View className="content">
        {/* 标题 */}
        <Text className="title">{title}</Text>
        
        {/* 时间信息 */}
        <Text className="date-time">{dateTime}</Text>
        
        {/* 地点和距离 */}
        <Text className="location">{location}・{distance}</Text>
        
        {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
        <View className="bottom-info">
          <View className="left-section">
            <View className="avatar-group">
              {Array.from({ length: Math.min(registeredCount, 3) }).map((_, index) => (
                <View key={index} className="avatar" >
                  <Image
                    className="avatar-image"
                    src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center" className="avatar-image" mode="aspectFill" />
                </View>
              ))}
            </View>
          </View>
          
          <View className="tags">
          <View className="tag">
              <Text className="tag-text">
               报名人数 {registeredCount}/<Text className="tag-text-max">{maxCount}</Text>
              </Text>
            </View>
            <View className="tag">
              <Text className="tag-text">{skillLevel}</Text>
            </View>
            <View className="tag">
              <Text className="tag-text">{matchType}</Text>
            </View>
          </View>
        </View>
      </View>
      
      {/* 右侧图片区域 */}
      <View className="image-section">
        {renderImages()}
      </View>
    </View>
  )
}

export default ListItem