import React from 'react';
import {View, TouchableWithoutFeedback} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {AvatarWithName} from '@components/Image';
import {User} from '@interfaces/user';
import {Screens} from '@shared/constants';
import {commonStyles} from '@shared/styles';

import {styles} from './styles';

interface Props {
  user: User;
}

function UserHeader({user}: Props) {
  const navigation = useNavigation();

  return (
    <TouchableWithoutFeedback
      disabled={!user.id}
      onPress={() => {
        navigation.navigate(Screens.PROFILE, {userId: user.id});
      }}>
      <View style={styles.header}>
        <AvatarWithName
          url={user.profilePicture}
          name={user}
          size="md"
          avatarStyle={user.deleted ? commonStyles.deleted : {}}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}

export default UserHeader;