"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("@emotion/react");
const React = require("react");
const jsxRuntime = require("@emotion/react/jsx-runtime");
const style = require("./style.js");
const camara = require("../../assets/icon/camara.svg.js");
const loading = require("../../assets/icon/loading.svg.js");
const pen_white = require("../../assets/icon/pen_white.png.js");
const Avatar = function({
  avatar,
  isOuter,
  isMiddle,
  isInner,
  imageLoading,
  onClick,
  onClickEdit,
  cssStyles,
  className
}) {
  const [imageIsLoaded, setImageIsLoaded] = React.useState(false);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    style.AvatarContainer,
    {
      isOuter,
      isMiddle,
      cssStyles,
      className,
      onClick: (e) => {
        e.stopPropagation();
        onClick == null ? void 0 : onClick();
      },
      children: [
        avatar ? /* @__PURE__ */ jsxRuntime.jsx(
          style.AvatarImage,
          {
            src: avatar,
            imageIsLoaded,
            onLoad: () => {
              setImageIsLoaded(true);
            }
          }
        ) : /* @__PURE__ */ jsxRuntime.jsx(style.AvatarImagePlaceholder, {}),
        /* @__PURE__ */ jsxRuntime.jsxs(style.AvatarMask, { isOuter, isMiddle, children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "edit" }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container", children: [
            isMiddle && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
              /* @__PURE__ */ jsxRuntime.jsx("img", { className: "img-edit", src: pen_white }),
              /* @__PURE__ */ jsxRuntime.jsx("div", { children: "EDIT" })
            ] }),
            isInner && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inner", onClick: (e) => onClickEdit == null ? void 0 : onClickEdit(e), children: !imageLoading ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: camara, width: "22px" }) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: loading, width: "26px" }) })
          ] })
        ] }),
        isOuter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "outer" })
      ]
    }
  );
};
exports.Avatar = Avatar;
//# sourceMappingURL=index.js.map
