<template>
  <div class="runtime-node">
    <Handle
      :id="`${id}_3`"
      type="target"
      :position="Position.Left"
      :connectable="false"
      class="runtime-handle runtime-handle--target"
    />
    <CustomFlow :properties="properties" :text="data.text" />
    <Handle
      :id="`${id}_1`"
      type="source"
      :position="Position.Right"
      :connectable="false"
      class="runtime-handle runtime-handle--source"
    />
  </div>
</template>

<script setup>
import { computed } from "vue";
import { Handle, Position } from "@vue-flow/core";
import CustomFlow from "./customFlow.vue";

const props = defineProps({ id: String, data: Object });
const properties = computed(() => props.data.properties || {});
</script>

<style scoped lang="scss">
.runtime-node {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.12);
}

.runtime-handle {
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  background: #2f80ed;
  &--target { left: -6px; }
  &--source { right: -6px; }
}
</style>
