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

interface ConversationItemProps {
  conversation: Conversation
  onClick: () => void
}

export function ConversationItem({ conversation, onClick }: ConversationItemProps) {
  return (
    <View className='conversation-item' onClick={onClick}>
      <Avatar
        avatarKey={conversation.avatarKey}
        avatarUrl={conversation.avatarUrl}
        label={conversation.title}
        size='lg'
        online={conversation.online}
        petTag={conversation.type === 'single' ? '🐾' : undefined}
      />
      <View className='conversation-item__main'>
        <View className='conversation-item__top'>
          <View className='conversation-item__name-row'>
            <Text className='conversation-item__name'>{conversation.title}</Text>
            {conversation.petName ? <Text className='conversation-item__pet'>{conversation.petName}</Text> : null}
          </View>
          <Text className='conversation-item__time'>{conversation.timeText}</Text>
        </View>
        <View className='conversation-item__bottom'>
          <Text className='conversation-item__preview'>{conversation.preview}</Text>
          {conversation.pinned ? (
            <View className='conversation-item__pin'>
              <Icon name='bookmark' size={12} />
            </View>
          ) : conversation.unreadCount > 0 ? (
            <Text className='conversation-item__badge'>{conversation.unreadCount}</Text>
          ) : conversation.muted ? (
            <View className='conversation-item__muted' />
          ) : null}
        </View>
      </View>
    </View>
  )
}

export default ConversationItem
