import { defineComponent as b, ref as i, watch as f, openBlock as n, createElementBlock as a, normalizeStyle as c, unref as m, createElementVNode as v } from "vue";
import { useColor as h, useGun as g, gunAvatar as d } from "./composables-5f691338.js";
const z = { class: "flex flex-col items-center justify-center" }, y = ["width", "height", "src"], x = /* @__PURE__ */ v("div", { class: "i-la-user" }, null, -1), k = [
  x
], C = /* @__PURE__ */ b({
  __name: "AccountAvatar",
  props: {
    pub: { type: String, default: "" },
    size: { type: Number, default: 42 },
    border: { type: Number, default: 2 }
  },
  setup(e) {
    const t = e, p = h("deep"), s = g(), o = i();
    f(() => t.pub, (r) => {
      o.value = d({ pub: t.pub, size: t.size * 4 });
    }, { immediate: !0 }), s.user(t.pub).get("avatar").on((r) => {
      r ? s.get("#avatars").get(r).once((l) => {
        o.value = l;
      }) : o.value = d({ pub: t.pub, size: t.size * 4 });
    });
    const u = i();
    return s.user(t.pub).get("pulse").on(() => {
      u.value = !u.value;
    }), (r, l) => (n(), a("div", z, [
      e.pub ? (n(), a("img", {
        key: 0,
        class: "border rounded-full overflow-hidden transition duration-500 ease-out",
        style: c({ borderColor: u.value ? m(p).hex(e.pub) : "transparent", borderWidth: `${e.border}px` }),
        width: e.size,
        height: e.size,
        src: o.value
      }, null, 12, y)) : (n(), a("div", {
        key: 1,
        class: "pb-2 px-1",
        style: c({ fontSize: e.size + "px" })
      }, k, 4))
    ]));
  }
});
export {
  C as default
};
//# sourceMappingURL=AccountAvatar-a3b40a15.js.map
