import { Image, Text, View } from '@tarojs/components'
import Avatar from '@/components/ui/Avatar'
import Icon from '@/components/ui/Icon'
import type { Post } from '@/types/domain'
import './index.scss'

interface PostCardProps {
  post: Post
  onLike: (postId: string) => void
}

function PostActionIcon({ type, onClick }: { type: 'heart' | 'comment'; onClick?: () => void }) {
  return <View className={`icon icon--${type}`} onClick={onClick} />
}

export function PostCard({ post, onLike }: PostCardProps) {
  return (
    <View className='post-card'>
      <View className='post-card__head'>
        <Avatar avatarKey={post.author.avatarKey} size='md' online />
        <View className='post-card__meta'>
          <View className='post-card__name-row'>
            <Text className='post-card__name'>{post.author.name}</Text>
            <Text className={`post-card__pet post-card__pet--${post.pet.tone || 'purple'}`}>
              {post.pet.name} · {post.pet.breed}
            </Text>
          </View>
          <View className='post-card__sub'>
            <Text>{post.locationText}</Text>
            <View className='post-card__dot' />
            <Text>{post.timeText}</Text>
          </View>
        </View>
        <View className='post-card__more'>
          <Icon name='more' size={16} />
        </View>
      </View>

      <Text className='post-card__body'>{post.body}</Text>

      {post.media && post.media.length ? (
        <View className={`post-card__photos post-card__photos--${Math.min(post.media.length, 3)}`}>
          {post.media.slice(0, 9).map((src, i) => (
            <Image key={i} className='post-card__photo' src={src} mode='aspectFill' />
          ))}
        </View>
      ) : (
        <View className={`post-card__media post-card__media--${post.mediaTone}`}>
          <View className='post-card__silhouette' />
          {post.sticker ? <Text className='post-card__sticker'>{post.sticker}</Text> : null}
        </View>
      )}

      <View className={`post-card__actions ${post.likedByMe ? 'post-card__actions--liked' : ''}`}>
        <PostActionIcon type='heart' onClick={() => onLike(post._id)} />
        <Text onClick={() => onLike(post._id)}>{post.counts.likes}</Text>
        <PostActionIcon type='comment' />
        <Text>{post.counts.comments}</Text>
      </View>
    </View>
  )
}

export default PostCard
