import * as React from 'react';
import { InitialsAvatar } from '../../InitialsAvatar/native';
import { IPUserAvatar } from '../UserAvatar.interface';
import { Container, ImageUser } from './UserAvatar.style';

export const UserAvatar: React.FunctionComponent<IPUserAvatar> = (props) => {
   const {
      sizeCircle,
      size,
      user: { name = '', image },
      skeleton = false,
   } = props;

   return image && !skeleton ? (
      <Container size={size} sizeCircle={sizeCircle}>
         <ImageUser
            source={{
               uri: image,
            }}
         />
      </Container>
   ) : (
      <InitialsAvatar skeleton={skeleton} name={name} size={size} sizeCircle={sizeCircle} />
   );
};
