"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("@emotion/react");
const React = require("react");
const jsxRuntime = require("@emotion/react/jsx-runtime");
const Img = require("../../node_modules/.pnpm/react-image@4.1.0_@babel_runtime@7.22.15_react-dom@17.0.2_react@17.0.2/node_modules/react-image/esm/Img.js");
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,
  style: style$1
}) {
  const [imageIsLoaded, setImageIsLoaded] = React.useState(false);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    style.AvatarContainer,
    {
      isOuter,
      isMiddle,
      cssStyles,
      className,
      style: style$1,
      onClick: (e) => {
        e.stopPropagation();
        onClick == null ? void 0 : onClick();
      },
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          Img,
          {
            src: avatar || "",
            loader: /* @__PURE__ */ jsxRuntime.jsx(style.AvatarImagePlaceholder, {}),
            unloader: /* @__PURE__ */ jsxRuntime.jsx(style.AvatarImagePlaceholder, {}),
            container: (children) => /* @__PURE__ */ jsxRuntime.jsx(style.AvatarImageContainer, { imageIsLoaded, children }),
            onLoad: () => {
              setImageIsLoaded(true);
            }
          }
        ),
        /* @__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
