import Avatar from '../Avatar';
import { TouchableOpacity, View } from 'react-native';
import { useStyles } from './styles';
import { CloseButton } from '../../elements';
import { Typography } from '../../../core/components/Typography/Typography';
export function MemberChip({
  style,
  member,
  onPress
}) {
  var _member$avatar;
  const {
    styles,
    theme
  } = useStyles();
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.memberChip, style]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.memberAvatarContainer
  }, /*#__PURE__*/React.createElement(Avatar.User, {
    uri: (_member$avatar = member.avatar) === null || _member$avatar === void 0 ? void 0 : _member$avatar.fileUrl,
    imageStyle: styles.memberAvatar,
    userName: member.displayName || member.userId
  }), onPress && /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.removeButtonContainer
  }, /*#__PURE__*/React.createElement(CloseButton, {
    onPress: () => onPress(member),
    iconProps: {
      color: theme.colors.background,
      width: 12,
      height: 12
    }
  }))), /*#__PURE__*/React.createElement(Typography.Caption, {
    numberOfLines: 1,
    ellipsizeMode: "tail",
    style: styles.memberName
  }, member.displayName || member.userId));
}
//# sourceMappingURL=MemberChip.js.map