import * as React from 'react';
import {StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';

type FollowUnfollowProps = {
  followed: boolean;
  handleFollowUnfollow: Function;
};

const FollowUnfollow: React.FC<FollowUnfollowProps> = ({
  followed,
  handleFollowUnfollow,
}) => {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={() => handleFollowUnfollow()}>
      <Text style={styles.text}>{!followed ? 'Follow' : 'Unfollow'}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 110,
    height: 40,
    borderRadius: 8,
    marginTop: '5%',
    borderColor: '#698dd3',
    backgroundColor: 'white',
    borderWidth: 3,
  },
  text: {
    fontWeight: 'bold',
    color: '#698dd3',
  },
});
export default FollowUnfollow;