import { Group } from "@cometchat/chat-sdk-javascript";

interface CustomGroupListProps {
    groups: Group[]; // Filtered list of groups
    onGroupClick: (group: Group) => void;
    activeGroup?: Group;
}

export const CustomGroupList = ({ groups, onGroupClick, activeGroup }: CustomGroupListProps) => {
    return (
        <div className="custom-group-list">
            {groups.map((group) => (
                <div
                    key={group.getGuid()} // Use the public method to get the GUID
                    className={`group-item ${activeGroup?.getGuid() === group.getGuid() ? "active" : ""}`} // Compare using getGuid()
                    onClick={() => onGroupClick(group)}
                >
                    {group.getName()} {/* Use the public method to get the group's name */}
                </div>
            ))}
        </div>
    );
};