import React from 'react';
import { View, Text, Image } from 'react-native';

import { styles } from './styles';

export const AvatarWithInitials = ({
  text,
  flag,
  size
}: {
  text: string;
  flag: string;
  size: number;
}) => {
  const shadowProps = [
    { textShadowOffset: { width: -0.5, height: -0.5 } },
    { textShadowOffset: { width: 0, height: -0.5 } },
    { textShadowOffset: { width: 0.5, height: -0.5 } },
    { textShadowOffset: { width: -0.5, height: 0 } },
    { textShadowOffset: { width: 0.5, height: 0 } },
    { textShadowOffset: { width: -0.5, height: 0.5 } },
    { textShadowOffset: { width: 0, height: 0.5 } },
    { textShadowOffset: { width: 0.5, height: 0.5 } }
  ].map((shadow) => ({
    ...shadow,
    textShadowRadius: 1,
    textShadowColor: 'white'
  }));

  return (
    <View style={[styles.container, { width: size, height: size, borderRadius: size / 2 }]}>
      <Image style={styles.avatar} source={{ uri: flag }} />
      <View style={styles.initialsContainer}>
        {shadowProps.map((props, index) => (
          <Text key={index} style={[styles.initials, props]}>
            {text}
          </Text>
        ))}
      </View>
    </View>
  );
};
