import { h } from "@stencil/core";
import { Icon } from "./icon";
export const ZAvatarGroup = ({ size = 'medium' }) => {
    const sizing = () => {
        if (size === '2x-small') {
            return {
                base: 'z-avatar-2x-small',
                icon: 'size-[8px]',
            };
        }
        if (size === 'x-small') {
            return {
                base: 'z-avatar-x-small',
                icon: 'size-[10px]',
            };
        }
        if (size === 'small') {
            return {
                base: 'z-avatar-small',
                icon: 'size-4',
            };
        }
        if (size === 'medium') {
            return {
                base: 'z-avatar-medium',
                icon: 'size-8',
            };
        }
        if (size === 'large') {
            return {
                base: 'z-avatar-large',
                icon: 'size-16',
            };
        }
        if (size === 'full') {
            return {
                base: 'z-avatar-full',
                icon: 'size-32',
            };
        }
    };
    return (h("div", { class: `z-avatar-group ${sizing().base} z-avatar-error` }, h(Icon, { name: "UsersRound", addClass: `${sizing().icon} text-white` })));
};
