import {Image} from 'expo-image'
import {type DimensionValue} from 'react-native'

type ThumbnailProps = {
  uri?: string | null
  width?: DimensionValue
  height?: DimensionValue
  aspectRatio?: number
  radius?: number
  accessibilityLabel?: string
}

// rectangular image for crumbs; mirrors the avatar's expo-image config
export const Thumbnail = ({
  uri,
  width = 52,
  height,
  aspectRatio,
  radius = 10,
  accessibilityLabel,
}: ThumbnailProps) => {
  if (!uri) return null
  return (
    <Image
      source={{uri}}
      style={{
        width,
        ...(height != null ? {height} : null),
        ...(aspectRatio != null ? {aspectRatio} : null),
        borderRadius: radius,
      }}
      contentFit="cover"
      transition={120}
      cachePolicy="memory-disk"
      accessibilityLabel={accessibilityLabel}
    />
  )
}
