import "@emotion/react";
import { useState } from "react";
import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
import Img from "../../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";
import { AvatarContainer, AvatarImagePlaceholder, AvatarImageContainer, AvatarMask } from "./style.js";
import camaraSvg from "../../assets/icon/camara.svg.js";
import loadingSvg from "../../assets/icon/loading.svg.js";
import pen_white from "../../assets/icon/pen_white.png.js";
const Avatar = function({
  avatar,
  isOuter,
  isMiddle,
  isInner,
  imageLoading,
  onClick,
  onClickEdit,
  cssStyles,
  className,
  style
}) {
  const [imageIsLoaded, setImageIsLoaded] = useState(false);
  return /* @__PURE__ */ jsxs(
    AvatarContainer,
    {
      isOuter,
      isMiddle,
      cssStyles,
      className,
      style,
      onClick: (e) => {
        e.stopPropagation();
        onClick == null ? void 0 : onClick();
      },
      children: [
        /* @__PURE__ */ jsx(
          Img,
          {
            src: avatar || "",
            loader: /* @__PURE__ */ jsx(AvatarImagePlaceholder, {}),
            unloader: /* @__PURE__ */ jsx(AvatarImagePlaceholder, {}),
            container: (children) => /* @__PURE__ */ jsx(AvatarImageContainer, { imageIsLoaded, children }),
            onLoad: () => {
              setImageIsLoaded(true);
            }
          }
        ),
        /* @__PURE__ */ jsxs(AvatarMask, { isOuter, isMiddle, children: [
          /* @__PURE__ */ jsx("div", { className: "edit" }),
          /* @__PURE__ */ jsxs("div", { className: "container", children: [
            isMiddle && /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx("img", { className: "img-edit", src: pen_white }),
              /* @__PURE__ */ jsx("div", { children: "EDIT" })
            ] }),
            isInner && /* @__PURE__ */ jsx("div", { className: "inner", onClick: (e) => onClickEdit == null ? void 0 : onClickEdit(e), children: !imageLoading ? /* @__PURE__ */ jsx("img", { src: camaraSvg, width: "22px" }) : /* @__PURE__ */ jsx("img", { src: loadingSvg, width: "26px" }) })
          ] })
        ] }),
        isOuter && /* @__PURE__ */ jsx("div", { className: "outer" })
      ]
    }
  );
};
export {
  Avatar
};
//# sourceMappingURL=index.js.map
