import React, { FC } from "react";
import { Aligment, Text } from "venice-ui";
import { IOrgMemberSimple } from "../../store/interface/organization";
import { ItemElement, ListWrapper } from "../components";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { DetailsText } from "../Organization/organizations.style";

interface IMemeberList {
  orgMembers: IOrgMemberSimple[];
}
export const MemeberList: FC<IMemeberList> = ({ orgMembers }) => {
  return (
    <Aligment>
      {orgMembers.length > 0 ? (
        <ListWrapper>
          {orgMembers.map((_member) => (
            <ItemElement className="item-list">
              <Text>{_member.email}</Text>
            </ItemElement>
          ))}
        </ListWrapper>
      ) : (
        <Aligment style={{ height: "100%" }} >
          <DetailsText>
            <Text>{t(dictionary.noMembersInContract)}</Text>
          </DetailsText>
        </Aligment>
      )}
    </Aligment>
  );
};