cally/components/shared/AssigneesDisplay.tsx

import React from "react";
import {ImageBackground, StyleSheet} from "react-native";
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";

const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
    selectedAttendees: string[],
    setSlectedAttendees: (value: React.SetStateAction<string[]>) => void
}) => {
    const {data: members} = useGetFamilyMembers(true);

    const selectedMembers = members?.filter((x) => selectedAttendees.includes(x?.uid!));

    const getInitials = (firstName: string, lastName: string) => {
        return `${firstName.charAt(0)}${lastName.charAt(0)}`;
    };

    const removeAttendee = (uid: string) => {
        setSlectedAttendees((prev) => prev.filter((x) => x !== uid));
    }

    return (
        <View row marginH-13 marginT-13 gap-20>
            {selectedMembers?.map((member) => (
                <TouchableOpacity key={member.uid} style={styles.assigneeWrapper}
                                  onPress={() => removeAttendee(member.uid!)}>
                    {member?.pfp ? (
                        <ImageBackground
                            source={{uri: member?.pfp}}
                            style={styles.image}
                            children={<RemoveAssigneeBtn/>}
                        />
                    ) : (
                        <View style={styles.initialsCircle}>
                            <Text style={styles.initialsText}>
                                {getInitials(member.firstName, member.lastName)}
                            </Text>
                        </View>
                    )}
                    <RemoveAssigneeBtn/>
                </TouchableOpacity>
            ))}

            {selectedAttendees.length === 0 && <Text>No attendees added</Text>}
        </View>
    );
};

const styles = StyleSheet.create({
    assigneeWrapper: {
        position: 'relative',
        width: 58.08,
        aspectRatio: 1,
    },
    image: {
        aspectRatio: 1,
        width: '100%',
        borderRadius: 100, // Makes the image circular
        overflow: 'hidden',
    },
    initialsCircle: {
        backgroundColor: '#ccc',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 100, // Circular shape
        width: '100%',
        height: '100%',
    },
    initialsText: {
        color: '#fff',
        fontSize: 24,
        fontWeight: 'bold',
    },
});

export default AssigneesDisplay;