/**
 * 显示 members 头像组，最多显示5个，超过5个显示加号
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Box, Avatar } from '@mui/material';
import UserCard from '@arcblock/ux/lib/UserCard';
import { CardType } from '@arcblock/ux/lib/UserCard/types';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function MembersAvatarGroup({
  members,
  total
}) {
  return /*#__PURE__*/_jsxs(Box, {
    className: "members-avatar-group",
    sx: {
      display: 'flex',
      alignItems: 'center',
      '& > *:not(:first-of-type)': {
        ml: -1 // 重叠效果
      }
    },
    children: [members.map((member, index) => /*#__PURE__*/_jsx(Box, {
      sx: {
        position: 'relative',
        zIndex: index // 从左到右 z-index 递增
      },
      children: /*#__PURE__*/_jsx(UserCard, {
        did: member.userDid,
        avatarSize: 32,
        cardType: CardType.AvatarOnly,
        showHoverCard: false
      })
    }, member.userDid)), total > 5 && /*#__PURE__*/_jsxs(Avatar, {
      sx: {
        width: 32,
        height: 32,
        bgcolor: 'grey',
        fontSize: 14
      },
      children: ["+", total - 5]
    })]
  });
}
MembersAvatarGroup.propTypes = {
  members: PropTypes.array.isRequired,
  total: PropTypes.number.isRequired
};