import React from 'react';
import {Pressable, View} from 'react-native';
import {IconX} from '@tabler/icons-react-native';
import {Typography, Avatar} from '@components';
import {ReducedUser} from '@modules/group/interfaces';
import {getCompleteName} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  user: ReducedUser;
  onPress: () => void;
}

function SelectedUser({onPress, user}: Props) {
  const {theme, iconSizes} = useTheme();
  const name = getCompleteName(user);
  return (
    <Pressable onPress={onPress} style={styles.itemContainer}>
      <View style={styles.internalItemContainer}>
        <Avatar url={user.profilePicture} name={name} />
        <Typography
          variant="xxxs"
          color={theme.text.neutral.lighter}
          numberOfLines={1}
          style={styles.internalItemTitle}>
          {name}
        </Typography>
        <View
          style={[
            {
              backgroundColor: theme.button.background.secondary.default,
              borderColor: theme.border.neutral.brand,
            },
            styles.internalItemXContainer,
          ]}>
          <IconX color={theme.text.neutral.brand} size={iconSizes.x4} />
        </View>
      </View>
    </Pressable>
  );
}

export default SelectedUser;