import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React from "react";
import classnames from "classnames";
import { Avatar } from "../Avatar";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const AvatarGroup = props => {
  const {
    max = 10,
    xs = "medium",
    shape = null,
    sm = null,
    md = null,
    lg = null,
    xl = null,
    children,
    backgroundColor = null,
    className,
    ...otherProps
  } = props;
  const childrenWithProps = React.Children.map(children, (child, index) => {
    // Checking isValidElement is the safe way and avoids a typescript
    // error too.
    if ( /*#__PURE__*/React.isValidElement(child)) {
      if (index + 1 === max) {
        return /*#__PURE__*/_jsx(Avatar, {
          alt: "+" + (React.Children.count(children) - max).toString(),
          xs: xs,
          sm: sm,
          md: md,
          lg: lg,
          xl: xl,
          bordered: true,
          backgroundColor: backgroundColor
        });
      } else if (index < max) {
        return /*#__PURE__*/React.cloneElement(child, {
          groupXS: xs,
          groupSM: sm,
          groupMD: md,
          groupLG: lg,
          groupXL: xl,
          groupShape: shape,
          bordered: true,
          groupBackgroundColor: backgroundColor
        });
      }
    }
  });
  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-AvatarGroup",
    ...otherProps,
    className: "jsx-1510576301" + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-AvatarGroup", className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "1510576301",
      children: ".Wps-AvatarGroup.jsx-1510576301{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-min-content;width:-moz-min-content;width:min-content;}.Wps-AvatarGroup.jsx-1510576301 div,.Wps-AvatarGroup.jsx-1510576301 a{margin-left:-8%;}.Wps-AvatarGroup.jsx-1510576301 div:first-child,.Wps-AvatarGroup.jsx-1510576301 a:first-child{margin-left:0;}"
    }), childrenWithProps]
  });
};