import { PropsWithChildren } from 'react'
import { Image, Text, View } from '@tarojs/components'
import './index.scss'

interface AvatarProps {
  avatarKey?: string
  avatarUrl?: string
  label?: string
  size?: 'sm' | 'md' | 'lg' | 'xl'
  online?: boolean
  petTag?: string
}

export function Avatar({
  avatarKey = 'gradient-avatar-1',
  avatarUrl,
  label,
  size = 'md',
  online = false,
  petTag,
  children
}: PropsWithChildren<AvatarProps>) {
  const hasImage = Boolean(avatarUrl)
  return (
    <View className={`avatar avatar--${size} ${hasImage ? 'avatar--image' : avatarKey}`}>
      {hasImage ? (
        <Image className='avatar__image' src={avatarUrl as string} mode='aspectFill' />
      ) : (
        children || (label ? <Text className='avatar__label'>{label.slice(0, 1)}</Text> : null)
      )}
      {online ? <View className='avatar__online' /> : null}
      {petTag ? <Text className='avatar__pet-tag'>{petTag}</Text> : null}
    </View>
  )
}

export default Avatar

