import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {ProfilePreviewType, ScreenType} from '../../types';
import {ProfilePreview} from '..';
import {useNavigation} from '@react-navigation/native';
import {Button} from 'react-native-elements';

interface FriendsProps {
  result: Array<ProfilePreviewType>;
  screenType: ScreenType;
}

const Friends: React.FC<FriendsProps> = ({result, screenType}) => {
  const navigation = useNavigation();
  return (
    <>
      <View style={styles.header}>
        <Button
          title="X"
          buttonStyle={styles.button}
          titleStyle={styles.buttonText}
          onPress={() => {
            navigation.pop();
          }}
        />
        <Text style={styles.title}>Friends</Text>
      </View>
      {result.map((profilePreview) => (
        <ProfilePreview
          style={styles.friend}
          key={profilePreview.id}
          {...{profilePreview}}
          previewType={'Friend'}
          screenType={screenType}
        />
      ))}
    </>
  );
};

const styles = StyleSheet.create({
  header: {flexDirection: 'row'},
  friend: {
    marginVertical: 10,
  },
  title: {
    position: 'relative',
    fontSize: 17,
    fontWeight: 'bold',
    paddingBottom: 10,
    paddingTop: 10,
    flexGrow: 1,
    paddingLeft: '26%',
  },
  button: {
    backgroundColor: 'transparent',
  },
  buttonText: {
    color: 'black',
    fontSize: 18,
    fontWeight: '400',
  },
});

export default Friends;