import React from 'react';
import { Image, Text, View } from 'react-native';
import { User } from 'lucide-react-native';

import { sharingPanelStyles as localStyles } from './sharingPanelStyles';
import { themedColor } from '../../theme';
import type { SuperagentCollaborator } from '../../types';

export function CollaboratorRow({collaborator}: {collaborator: SuperagentCollaborator}) {
  const displayName = collaborator.full_name || collaborator.email.split('@')[0] || collaborator.email;
  return (
    <View style={localStyles.memberRow}>
      <View style={localStyles.avatarWrap}>
        {collaborator.profile_image_url && !collaborator.is_pending ? (
          <Image source={{uri: collaborator.profile_image_url}} style={localStyles.avatarImage} />
        ) : (
          <User color={themedColor('#F4F4F5')} size={17} strokeWidth={2.2} />
        )}
      </View>
      <View style={localStyles.memberTextWrap}>
        <View style={localStyles.memberNameRow}>
          <Text numberOfLines={1} style={localStyles.memberName}>{displayName}</Text>
          {collaborator.is_owner ? <Text style={localStyles.badge}>Owner</Text> : null}
          {collaborator.is_pending ? <Text style={localStyles.badge}>Pending</Text> : null}
        </View>
        <Text numberOfLines={1} style={localStyles.memberEmail}>{collaborator.email}</Text>
      </View>
    </View>
  );
}