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

interface NearbyPetCardProps {
  pet: NearbyPet
  active: boolean
  onSelect: () => void
  onLike: () => void
}

export function NearbyPetCard({ pet, active, onSelect, onLike }: NearbyPetCardProps) {
  return (
    <View className={`nearby-pet-card ${active ? 'nearby-pet-card--active' : ''}`} onClick={onSelect}>
      <View className={`nearby-pet-card__photo ${pet.photoKey}`}>
        <Text className='nearby-pet-card__distance'>{pet.distanceText}</Text>
      </View>
      <View className='nearby-pet-card__info'>
        <View className='nearby-pet-card__title'>
          <Text className='nearby-pet-card__name'>{pet.name}</Text>
          {pet.online ? <View className='nearby-pet-card__online' /> : null}
        </View>
        <Text className='nearby-pet-card__meta'>
          {pet.breed} · {pet.ageText}
        </Text>
        <Text className='nearby-pet-card__mood'>{pet.mood}</Text>
        <View className='nearby-pet-card__tags'>
          {pet.tags.slice(0, 2).map(tag => (
            <Text key={tag} className='nearby-pet-card__tag'>
              {tag}
            </Text>
          ))}
        </View>
      </View>
      <View className='nearby-pet-card__actions'>
        <View className='nearby-pet-card__btn'>
          <Icon name='message' size={16} />
        </View>
        <View
          className='nearby-pet-card__btn nearby-pet-card__btn--like'
          onClick={event => {
            event.stopPropagation()
            onLike()
          }}
        >
          <Icon name='heart-fill' size={16} />
        </View>
      </View>
    </View>
  )
}

export default NearbyPetCard

