import React from 'react';
import {View} from 'react-native';
import {Image} from '@components';
import Text from '@components/Text';
import {Icon, IconTypes} from '@interfaces/icon';
import {useTheme} from '@shared/theme';

import {GroupIconVariant} from './constants';
import {getStylesByVariant, styles} from './styles';

interface Props {
  icon: Icon;
  variant: GroupIconVariant;
}

function GroupIcon({icon, variant}: Props) {
  const {theme} = useTheme();
  const {container, emojiStyle, imageStyle} = getStylesByVariant(variant);

  return (
    <View
      style={[
        container,
        styles.container,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      {icon.type === IconTypes.EMOJI ? (
        <Text style={[styles.emojiStyle, emojiStyle]} allowFontScaling={false}>
          {icon.value}
        </Text>
      ) : (
        <Image
          style={[imageStyle, styles.container]}
          source={{uri: icon.value}}
          contentFit="cover"
        />
      )}
    </View>
  );
}

export {GroupIconVariant};

export default GroupIcon;