import styles from './Mitglieder.module.css'
import { useOrgUsers } from '../../../auth/Hooks/get-all-users';
import MitgliederItem from '../../../components/Mitglieder/MitgliederItem';
import { IoPersonAddSharp } from "react-icons/io5";

function Mitglieder () {
    const { users, loading, error, refetch } = useOrgUsers();


    return (
        <div className={styles.mitgliederContainer}>
            <div className={styles.header}>
                <button className={styles.mitglieder_hinzufügen_button}>
                    <IoPersonAddSharp className={styles.add_icon}/>
                    Mitglied hinzufügen 
                </button>
            </div>
           <div className={styles.horizontalLineLight}></div>

           {users.length === 0 ? (
                <p>No users found.</p>
            ) : (
                <ul className={styles.membersList}>
                {users.map(user => (
                    <MitgliederItem 
                        key={user.azure_id} 
                        user={user} 
                        refetchUsers={refetch}
                        totalUsers={users.length}
                    />
                ))}
                </ul>
            )}

        </div>
    );
}

export default Mitglieder;