import React from 'react';
import {View, StyleSheet, Text, ViewProps, Image} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

/**
 * Search Screen for user recommendations and a search
 * tool to allow user to find other users
 */

interface SuggestedUserProps extends ViewProps {
  name: string;
}
const SuggestedUser: React.FC<SuggestedUserProps> = ({name, style}) => {
  return (
    <View style={[styles.container, style]}>
      <LinearGradient
        colors={['#9F00FF', '#27EAE9']}
        useAngle
        angle={90}
        angleCenter={{x: 0.5, y: 0.5}}
        style={styles.gradient}>
        <Image
          source={require('../../assets/images/avatar-placeholder.png')}
          style={styles.profile}
        />
      </LinearGradient>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.username}>{`@${name.split(' ').join('')}`}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  gradient: {
    height: 80,
    width: 80,
    borderRadius: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  profile: {
    height: 76,
    width: 76,
    borderRadius: 38,
  },
  name: {
    fontWeight: '600',
    fontSize: 16,
    color: '#fff',
  },
  username: {
    fontWeight: '600',
    fontSize: 14,
    color: '#fff',
  },
});
export default SuggestedUser;