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

interface Props { task: Task }

export default function SecondhandCard({ task }: Props) {
  return (
    <View className='task-card secondhand-card'>
      <View className='card-top'>
        {task.images && task.images.length > 0 && (
          <VantImage
            className='goods-thumb'
            src={task.images[0]}
            fit='cover'
            width={160}
            height={160}
            radius={8}
          />
        )}
        <View className='task-info'>
          <View className='task-type-row'>
            <Text className='type-badge secondhand'>二手交易</Text>
          </View>
          <Text className='task-title'>{task.title}</Text>
          <Text className='task-desc'>{task.desc}</Text>
          {task.tags && (
            <View className='tag-row'>
              {task.tags.map((t) => (
                <Tag key={t} type='primary' plain>{t}</Tag>
              ))}
            </View>
          )}
        </View>
        <Text className='task-price'>{task.reward}</Text>
      </View>
      <View className='card-bottom'>
        <View className='publisher'>
          <VantImage
            className='pub-avatar'
            src={task.publisher.avatar}
            fit='cover'
            width={36}
            height={36}
            round
          />
          <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>
  )
}