// @flow
import React from 'react';
import { ImageBackground, StyleSheet, View } from 'react-native';
import styles from './Avatar.styles';

type Props = {
  description: string,
  imageUrl: string,
  size: number,
};

const Avatar = ({ description, imageUrl, size }: Props) => {
  const sizeStyle = { height: size, width: size };
  const style = StyleSheet.flatten([styles.avatar, sizeStyle]);
  const source = {
    uri: imageUrl,
    width: size,
    height: size,
  };

  return (
    <View style={style}>
      <ImageBackground
        accessibilityLabel={description}
        source={source}
      >
        <View style={sizeStyle} />
      </ImageBackground>
    </View>
  );
};

Avatar.defaultProps = {
  description: '',
  imageUrl: ' ',
  size: 40,
};

export default Avatar;
