import { useColor as c, openBlock as t, createElementBlock as o, unref as r, isEmoji as i, toDisplayString as a, createCommentVNode as l, createVNode as n, withCtx as d, normalizeStyle as u } from "./composables-Ci32s3jE.js";
import { AccountBadge as m } from "./components.js";
const f = {
  key: 0,
  class: "px-2 text-2xl"
}, y = {
  key: 0,
  class: "pr-2 text-xl"
}, p = {
  __name: "MateLink",
  props: {
    emoji: { type: String, default: "" },
    from: { type: String, default: "" },
    to: { type: String, default: "" },
    back: { type: String, default: "" }
  },
  setup(e) {
    const s = c("deep");
    return (h, x) => (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: u({ backgroundColor: r(s).hex(e.from) + "33" })
    }, [
      r(i)(e.emoji) ? (t(), o("div", f, a(e.emoji), 1)) : l("", !0),
      n(r(m), {
        class: "shadow-md",
        selectable: !0,
        pub: e.to
      }, {
        default: d(() => [
          e.back ? (t(), o("div", y, a(e.back), 1)) : l("", !0)
        ]),
        _: 1
      }, 8, ["pub"])
    ], 4));
  }
};
export {
  p as default
};
//# sourceMappingURL=MateLink-DgYzUT5E.js.map
