import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useState } from "react";
import { StyledAvatar, StyledWrapper } from "./Styles";
import { SkeletonLoader } from "../Loaders";
/**
 * @component Avatar
 * @description
 * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
 *
 * @prop {url} - The image url of the Avatar.
 * @prop {size} - controls the size of an Avatar (width and height) in pixels.
 * @prop {alt} - alt attribute of the img.
 * @prop {imgClassName} - class name that attaches to img element nested in Wrapper
 *
 * @example
 * <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
 *
 * @example
 * <Avatar
 *   url="https://faces-img.xcdn.link/image-lorem-face-954.jpg"
 *   alt="Profile picture of John">
 *   <Badge size={8} backgroundColor="green" position="bottom-left" />
 * </Avatar>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
 * @see
 * https://design.activecollab.com/docs/components/avatar
 */
export const Avatar = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    url,
    alt = "Avatar Image",
    size = 24,
    className,
    imgClassName,
    children,
    ...rest
  } = _ref;
  const [imageLoaded, setImageLoaded] = useState(false);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    className: className
  }, children, /*#__PURE__*/React.createElement(StyledAvatar, _extends({
    ref: ref,
    src: url,
    alt: alt,
    width: size,
    height: size,
    onLoad: () => {
      setImageLoaded(true);
    },
    role: "img",
    className: imgClassName,
    style: {
      display: imageLoaded ? "block" : "none"
    }
  }, rest)), !imageLoaded && /*#__PURE__*/React.createElement(SkeletonLoader, {
    "data-testid": "loader",
    style: {
      width: size,
      height: size,
      borderRadius: "100%"
    }
  }));
});
Avatar.displayName = "Avatar";
//# sourceMappingURL=Avatar.js.map