import React from 'react'
import AvatarPrimitive, {
  type AvatarImageProps,
  type AvatarPresenceProps,
  type AvatarRootProps,
} from '../primitive/avatar_primitive'
import { type IconString } from './icon'

interface AvatarProps {
  sourceUri: AvatarImageProps['sourceUri']
  size?: AvatarRootProps['size']
  presence?: AvatarPresenceProps['presence']
  showFallback?: boolean
  fallbackIconName?: IconString
  style?: AvatarRootProps['style']
  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
  minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']
}

export function Avatar({
  presence,
  size = 'lg',
  sourceUri,
  showFallback = false,
  fallbackIconName = 'general.person',
  style,
  maxFontSizeMultiplier,
  minFontSizeMultiplier,
}: AvatarProps) {
  const shouldShowFallback = showFallback || !sourceUri

  return (
    <AvatarPrimitive.Root
      size={size}
      style={style}
      maxFontSizeMultiplier={maxFontSizeMultiplier}
      minFontSizeMultiplier={minFontSizeMultiplier}
    >
      <AvatarPrimitive.Mask>
        {shouldShowFallback ? (
          <AvatarPrimitive.ImageFallback name={fallbackIconName} />
        ) : (
          <AvatarPrimitive.Image sourceUri={sourceUri} />
        )}
      </AvatarPrimitive.Mask>
      {presence && <AvatarPrimitive.Presence presence={presence} />}
    </AvatarPrimitive.Root>
  )
}