import { Flex, MantineSize } from "@mantine/core";
import { UserRow } from "../UserRow/UserRow";
import { SettingsPaper } from "../SettingsPaper/SettingsPaper";

interface GroupMembersProps {
    usersPublicKeys: string[];
    mt?: MantineSize;
    rightSection?: (publicKey: string) => React.ReactNode;
    style?: React.CSSProperties;
}

export function UsersTable(props: GroupMembersProps) {
    return (
        <SettingsPaper mt={props.mt} style={props.style}>
            <Flex direction="column" gap={0} style={{ width: '100%' }}>
                {props.usersPublicKeys.map((pk) => (
                    <UserRow rightSection={props.rightSection} key={pk} publicKey={pk} />
                ))}
            </Flex>
        </SettingsPaper>
    );
}