import { Image, StyleSheet, Text, View } from 'react-native';
import { variants, variantTexts, innerBorders } from '../common/styles';
import { avatars, texts } from './styles';
import type { IAvatarProps } from './types';

export default function Avatar(props: IAvatarProps) {
  const { children, size = 'medium', source, style, textStyle } = props;
  return (
    <View
      style={StyleSheet.flatten([
        variants.basic,
        avatars.basic,
        avatars[size],
        variants.primary,
        style,
      ])}
    >
      <View
        style={StyleSheet.flatten([
          innerBorders.basic,
          avatars.innerView,
          innerBorders.primary,
        ])}
      >
        {source ? (
          <Image style={avatars.image} source={source} />
        ) : (
          <Text
            style={StyleSheet.flatten([
              variantTexts.basic,
              variantTexts.primary,
              texts[size],
              textStyle,
            ])}
          >
            {children}
          </Text>
        )}
      </View>
    </View>
  );
}