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