import { resolveComponent as l, openBlock as t, createElementBlock as o, normalizeStyle as i, unref as a, toDisplayString as r, createCommentVNode as n, createVNode as d, withCtx as u } from "vue";
import { useColor as m, isEmoji as f } from "./composables-5f691338.js";
const y = {
  key: 0,
  class: "px-2 text-2xl"
}, p = {
  key: 0,
  class: "pr-2 text-xl"
}, k = {
  __name: "MateLink",
  props: {
    emoji: { type: String, default: "" },
    from: { type: String, default: "" },
    to: { type: String, default: "" },
    back: { type: String, default: "" }
  },
  setup(e) {
    const c = m("deep");
    return (b, g) => {
      const s = l("account-badge");
      return t(), o("div", {
        class: "flex cursor-pointer items-center rounded-full m-1 shadow-sm hover-shadow-md transition duration-200ms ease-out filter grayscale-10 hover-grayscale-0 justify-between",
        style: i({ backgroundColor: a(c).hex(e.from) + "33" })
      }, [
        a(f)(e.emoji) ? (t(), o("div", y, r(e.emoji), 1)) : n("", !0),
        d(s, {
          class: "shadow-md",
          selectable: !0,
          pub: e.to
        }, {
          default: u(() => [
            e.back ? (t(), o("div", p, r(e.back), 1)) : n("", !0)
          ]),
          _: 1
        }, 8, ["pub"])
      ], 4);
    };
  }
};
export {
  k as default
};
//# sourceMappingURL=MateLink-492f8ef2.js.map
