import React from 'react';
import {Image, StyleSheet} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants';
import {AuthContext} from '../../routes/authentication';

/**
 * An image component that returns the <Image> of the icon for a specific social media platform.
 */
const AvatarTitle: React.FC = () => {
  const {avatar} = React.useContext(AuthContext);
  return (
    <LinearGradient
      colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
      useAngle={true}
      angle={154.72}
      angleCenter={{x: 0.5, y: 0.5}}
      style={[styles.gradient]}>
      <Image
        style={styles.avatar}
        source={
          avatar
            ? {uri: avatar}
            : require('../../assets/images/avatar-placeholder.png')
        }
      />
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  gradient: {
    width: AVATAR_GRADIENT_DIM,
    height: AVATAR_GRADIENT_DIM,
    borderRadius: AVATAR_GRADIENT_DIM / 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatar: {
    width: AVATAR_DIM,
    height: AVATAR_DIM,
    borderRadius: AVATAR_DIM / 2,
  },
});

export default AvatarTitle;