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

interface ImageGridCardProps {
  article: Article
}

export default function ImageGridCard({ article }: ImageGridCardProps) {
  const images = article.images.slice(0, 3)

  return (
    <View className='article-card image-grid-card'>
      <View className='card-title'>{article.title}</View>
      <View className='card-images'>
        {images.map((img, index) => (
          <Image
            key={index}
            className='grid-image'
            src={img}
            mode='aspectFill'
          />
        ))}
      </View>
      <View className='card-meta'>
        <Text className='meta-source'>{article.source}</Text>
        <Text className='meta-time'>{article.time}</Text>
        <Text className='meta-read'>{article.readCount}阅读</Text>
        {typeof article.commentCount === 'number' && (
          <Text className='meta-comment'>💬 {article.commentCount}</Text>
        )}
      </View>
    </View>
  )
}