import { FC } from 'react';
import { ScrollView, Text } from 'components';
import { InnerUsers } from './inner-users';
import { Groups } from './groups';
import { OrganizationAdmins } from './organization-admins';
import { GuestUsers } from './guest-users';

export const Users: FC = () => {
  return (
    <ScrollView flex={1} mx="m" pt="xs">
      <Text mb="m" variant="title">
        Organization Admins
      </Text>
      <OrganizationAdmins />

      <Text my="m" variant="title">
        Groups
      </Text>
      <Groups />

      <Text my="m" variant="title">
        Users
      </Text>
      <InnerUsers />

      <Text my="m" variant="title">
        Guest Users
      </Text>
      <GuestUsers />
    </ScrollView>
  );
};