import React, {FC} from 'react';
import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native';

type AvatarProps = {
  style: StyleProp<ImageStyle>;
  uri: string | undefined;
  loading?: boolean;
  loadingStyle?: StyleProp<ImageStyle> | undefined;
};
const Avatar: FC<AvatarProps> = ({
  style,
  uri,
  loading = false,
  loadingStyle,
}) => {
  return loading ? (
    <ImageBackground
      style={style}
      defaultSource={require('../../assets/images/avatar-placeholder.png')}
      source={{uri, cache: 'reload'}}>
      {loading && (
        <Image
          source={require('../../assets/gifs/loading-animation.gif')}
          style={loadingStyle}
        />
      )}
    </ImageBackground>
  ) : (
    <Image
      defaultSource={require('../../assets/images/avatar-placeholder.png')}
      source={{uri, cache: 'reload'}}
      style={style}
    />
  );
};

export default Avatar;