import { View } from 'tamagui'
import UserAvatar, { type AvatarSize } from './UserAvatar'

type MinimalAccount = {
  id: string | number
  avatar?: string | null
}

type Props = {
  url?: string | null
  userId: string | number
  booster?: MinimalAccount | null
  size?: AvatarSize
}

export default function BoostedAvatar({ url, userId, booster, size = 'md' }: Props) {
  return (
    <View style={{ position: 'relative', overflow: 'visible' }}>
      <UserAvatar url={url} userId={userId} size={size} />
      {booster ? (
        <View
          style={{
            position: 'absolute',
            top: -2,
            left: -4,
            zIndex: 2,
            elevation: 2,
          }}
        >
          <UserAvatar
            url={booster.avatar}
            userId={booster.id}
            size="xs"
            borderStyle="contrast"
            hitSlop={6}
          />
        </View>
      ) : null}
    </View>
  )
}
