import React from 'react';
import { ListItem } from 'react-native-elements';

import TagferAvatar from './TagferAvatar';
import TagferCheckbox from './TagferCheckbox';

import colors from '../../config/colors.json';

const UserListItem = ({ profile, selected, onPress }) => { 
  const { tagferId, fullName, jobTitle, companyName, photoURL } = profile;
  const subtitle = `@${tagferId}\n${jobTitle} at ${companyName}`;

  return (
  <ListItem
    roundAvatar
    avatar={<TagferAvatar size='medium' photoURL={photoURL} color={colors.lightGrey} />}
    title={fullName}
    subtitle={subtitle}
    subtitleNumberOfLines={3}
    subtitleStyle={{ fontSize: 12, fontWeight: 'normal' }}
    titleStyle={{ fontSize: 16, color: colors.black }}
    rightIcon={<TagferCheckbox isChecked={selected} onPress={onPress} />}
    containerStyle={{ backgroundColor: colors.white }}
  />);
};

export default UserListItem;
