import type { Task } from '@/types/task'
import { View, Text, Image } from '@tarojs/components'
import './index.less'

interface Props { task: Task }

export default function ActivityCard({ task }: Props) {
  const progress = task.maxParticipants
    ? Math.round(((task.participants || 0) / task.maxParticipants) * 100)
    : 0

  return (
    <View className='task-card activity-card'>
      <View className='card-top'>
        <View className='task-info'>
          <View className='task-type-row'>
            <Text className='type-badge activity'>校园活动</Text>
            <Text className='participants-count'>👥 {task.participants}/{task.maxParticipants}人</Text>
          </View>
          <Text className='task-title'>{task.title}</Text>
          <Text className='task-desc'>{task.desc}</Text>
        </View>
      </View>
      {/* 参与进度条 */}
      {task.maxParticipants && (
        <View className='progress-bar-wrap'>
          <View className='progress-bar' style={{ width: `${progress}%` }} />
        </View>
      )}
      <View className='card-bottom'>
        <View className='publisher'>
          <Image className='pub-avatar' src={task.publisher.avatar} mode='aspectFill' />
          <Text className='pub-name'>{task.publisher.name}</Text>
        </View>
        <View className='task-meta'>
          <Text className='meta-item'>📍 {task.location}</Text>
          <Text className='meta-item'>🕐 {task.time}</Text>
        </View>
      </View>
    </View>
  )
}