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

interface ProfileHeroProps {
  user: UserProfile
}

export function ProfileHero({ user }: ProfileHeroProps) {
  return (
    <View className='profile-hero'>
      <Avatar avatarKey={user.avatarKey} avatarUrl={user.avatarUrl} size='xl' label={user.nickname} />
      <View className='profile-hero__info'>
        <View className='profile-hero__name-row'>
          <Text className='profile-hero__name'>{user.nickname}</Text>
          <Text className='profile-hero__level'>Lv.{user.level}</Text>
        </View>
        <Text className='profile-hero__sub'>
          {user.location} · {user.yearsWithPets} 年养宠经验
        </Text>
        <View className='profile-hero__badges'>
          {user.verified ? (
            <View className='profile-hero__badge'>
              <Icon name='check' size={10} />
              <Text>实名认证</Text>
            </View>
          ) : null}
          {user.location ? (
            <View className='profile-hero__badge'>
              <Icon name='pin' size={10} />
              <Text>{user.location}</Text>
            </View>
          ) : null}
        </View>
      </View>
    </View>
  )
}

export default ProfileHero

