import { createElementBlock as t, openBlock as s, createVNode as c, TransitionGroup as u, withCtx as m, Fragment as p, renderList as g, normalizeStyle as x, createElementVNode as n, toDisplayString as o, unref as f } from "vue";
import { isEmoji as _ } from "./composables-BAZQlC3e.js";
const h = { class: "p-2 flex flex-wrap bg-light-800 shadow-md rounded-xl gap-2" }, k = ["onClick"], y = { class: "text-4xl" }, v = {
  key: 0,
  class: "i-la-angle-up"
}, b = {
  key: 1,
  class: "i-la-angle-down"
}, w = { class: "text-lg ml-1" }, B = {
  __name: "PostReactionTabs",
  props: {
    reactions: { type: Object, default: () => ({}) },
    current: { type: String, default: "" }
  },
  emits: ["update:current"],
  setup(l, { emit: i }) {
    const a = i;
    return (C, r) => (s(), t("div", h, [
      c(u, { name: "fade" }, {
        default: m(() => [
          (s(!0), t(p, null, g(l.reactions, (d, e) => (s(), t("div", {
            class: "flex py-2 items-center cursor-pointer bg-light-100 dark-bg-dark-200 rounded-xl shadow-lg px-4",
            key: e,
            style: x([{ flex: "1 1 10px" }, { backgroundColor: l.current == e ? "#999" : "" }]),
            onClick: (j) => a("update:current", e)
          }, [
            n("div", y, o(f(_)(e) ? e : "👋"), 1),
            r[0] || (r[0] = n("div", { class: "flex-1 w-4" }, null, -1)),
            l.current == e ? (s(), t("div", v)) : (s(), t("div", b)),
            n("div", w, o(Object.keys(d).length), 1)
          ], 12, k))), 128))
        ]),
        _: 1
      })
    ]));
  }
};
export {
  B as default
};
//# sourceMappingURL=PostReactionTabs-D_PVvpU5.js.map
