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

interface AvatarGroupDisplayProps {
  sourceUris: AvatarGroupProps['sourceUris']
  showFallback?: boolean
  fallbackIconName?: IconString
  size?: AvatarRootProps['size']
  style?: AvatarRootProps['style']
  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
  minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']
}

export function AvatarGroup({
  sourceUris,
  showFallback = false,
  fallbackIconName = 'general.person',
  size = 'lg',
  style,
  maxFontSizeMultiplier,
  minFontSizeMultiplier,
}: AvatarGroupDisplayProps) {
  const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0

  return (
    <AvatarPrimitive.Root
      size={size}
      style={style}
      maxFontSizeMultiplier={maxFontSizeMultiplier}
      minFontSizeMultiplier={minFontSizeMultiplier}
    >
      <AvatarPrimitive.Mask>
        {shouldShowFallback ? (
          <AvatarPrimitive.ImageFallback name={fallbackIconName} />
        ) : (
          <>
            <AvatarPrimitive.Group sourceUris={sourceUris} />
            <AvatarPrimitive.GroupLoader />
          </>
        )}
      </AvatarPrimitive.Mask>
    </AvatarPrimitive.Root>
  )
}