import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import "./style.scss";
import CircularIcon from '../CircularIcon';
const AvatarGroup = ({ images = [], initials = [], iconSize = "24", counter = 0 }) => {
    return (_jsxs("div", { className: 'avatarGroup', children: [images.map(image => _jsx(CircularIcon, { className: `w-${iconSize}`, iconPath: image.iconUrl, iconSize: iconSize, altImageType: "profile" })), 
            // The style is used to cover Every kind of Color
            initials.map(item => _jsx("div", { className: `w-${iconSize}`, style: {
                    background: item.color,
                    color: item.initialColor,
                    borderColor: "#FF8D4E"
                }, children: item.initial })), counter ?
                initials.length > 0 ?
                    _jsxs("div", { className: `w-${iconSize}`, style: { borderColor: "#FF8D4E" }, children: ["+", counter] })
                    :
                        _jsxs("div", { className: `w-${iconSize}`, children: ["+", counter] }) : _jsx(_Fragment, {})] }));
};
export default AvatarGroup;
