import { Link } from 'expo-router'
import { Pressable } from 'react-native'
import SiteAvatar, { type SiteAvatarBorder, type SiteAvatarSize } from './SiteAvatar'

// Re-exported for source-compat at every existing UserAvatar call site. The
// underlying SiteAvatar widens the union to include `xxs`, used by inline /
// chip favicons — UserAvatar consumers continue to pass `xs | sm | md | lg`.
export type AvatarSize = Exclude<SiteAvatarSize, 'xxs'>

type Props = {
  url?: string | null
  size?: AvatarSize
  userId?: string | number
  onPress?: () => void
  initial?: string
  borderStyle?: SiteAvatarBorder
  hitSlop?: number
  // Forwarded to expo-image for FlashList recycler hygiene — see SiteAvatar.
  recyclingKey?: string
  accessibilityLabel?: string
}

export default function UserAvatar({
  url,
  size = 'md',
  userId,
  onPress,
  initial,
  borderStyle = 'default',
  hitSlop,
  recyclingKey,
  accessibilityLabel,
}: Props) {
  const avatar = (
    <SiteAvatar
      url={url}
      size={size}
      initial={initial}
      shape="circle"
      borderStyle={borderStyle}
      priority="high"
      recyclingKey={recyclingKey}
      accessibilityLabel={accessibilityLabel}
    />
  )

  if (userId != null) {
    return (
      <Link href={`/profile/${userId}`} asChild>
        <Pressable hitSlop={hitSlop ?? 4} accessibilityLabel={accessibilityLabel}>
          {avatar}
        </Pressable>
      </Link>
    )
  }

  if (onPress) {
    return (
      <Pressable
        onPress={onPress}
        hitSlop={hitSlop ?? 4}
        accessibilityLabel={accessibilityLabel}
      >
        {avatar}
      </Pressable>
    )
  }

  return avatar
}
