import { defineComponent, ref, watch } from "vue";
import { ssrRenderTeleport, ssrRenderClass, ssrRenderStyle, ssrInterpolate } from "vue/server-renderer";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "NotificationToast",
  __ssrInlineRender: true,
  props: {
    message: { default: "" },
    type: { default: "success" },
    duration: { default: 3e3 }
  },
  emits: ["close"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const show = ref(false);
    const emit = __emit;
    watch(() => props.message, (newVal) => {
      if (newVal) {
        show.value = true;
        setTimeout(() => {
          show.value = false;
          setTimeout(() => {
            emit("close");
          }, 300);
        }, props.duration);
      }
    }, { immediate: true });
    return (_ctx, _push, _parent, _attrs) => {
      ssrRenderTeleport(_push, (_push2) => {
        if (_ctx.message) {
          _push2(`<div class="${ssrRenderClass([
            "fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-all duration-300",
            _ctx.type === "success" ? "bg-green-500" : "bg-red-500",
            "text-white"
          ])}" style="${ssrRenderStyle({ transform: show.value ? "translateY(0)" : "translateY(-100%)" })}">${ssrInterpolate(_ctx.message)}</div>`);
        } else {
          _push2(`<!---->`);
        }
      }, "body", false, _parent);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=NotificationToast.vue2.mjs.map