import { defineComponent as m, useUser as p, useColor as _, computed as v, useBackground as f, unref as e, openBlock as o, createElementBlock as n, createBaseVNode as s, createVNode as a, toDisplayString as b, normalizeStyle as r, createCommentVNode as k } from "./composables-Ci32s3jE.js";
import { UserAvatar as x, MateButton as g } from "./components.js";
const y = { class: "flex items-center" }, h = { class: "text-2xl mx-2 font-bold" }, C = /* @__PURE__ */ s("div", { class: "flex-1" }, null, -1), B = {
  key: 0,
  class: "i-la-lock"
}, w = {
  key: 1,
  class: "i-la-unlock"
}, z = /* @__PURE__ */ s("div", { class: "i-ion-exit-outline" }, null, -1), N = [
  z
], D = /* @__PURE__ */ m({
  __name: "UserPanel",
  emits: ["browse"],
  setup(U, { emit: V }) {
    const { user: t, leave: c } = p();
    _("deep");
    const u = v(() => f({ pub: t.pub, size: 600, light: 0.5, draw: "circles" }));
    return (S, l) => {
      var i;
      return e(t).is ? (o(), n("div", {
        key: 0,
        class: "p-4 flex items-center w-full",
        style: r({ ...u.value })
      }, [
        s("div", y, [
          a(e(x), { size: 120 }),
          s("div", h, b((i = e(t)) == null ? void 0 : i.name), 1)
        ]),
        a(e(g), {
          pub: e(t).pub
        }, null, 8, ["pub"]),
        C,
        s("div", {
          class: "p-1 m-1 rounded-full transition-all duration-300 ease-in-out",
          style: r({ backgroundColor: e(t).blink ? "white" : "black" })
        }, null, 4),
        s("button", {
          class: "p-2 text-2xl",
          onClick: l[0] || (l[0] = (d) => e(t).db.get("safe").get("saved").put(!e(t).safe.saved))
        }, [
          e(t).safe.saved ? (o(), n("div", B)) : (o(), n("div", w))
        ]),
        s("button", {
          class: "text-2xl ml-1 p-2",
          onClick: l[1] || (l[1] = (d) => e(c)())
        }, N)
      ], 4)) : k("", !0);
    };
  }
});
export {
  D as default
};
//# sourceMappingURL=UserPanel-BzWza28W.js.map
