<template>
  <div class="node">
    <div class="header">
      <button @click="$emit('openSetup', node.id)">
        <img src="../../../resources/img/option.png" alt="옵션" />
      </button>
      <button
        v-if="node.label !== 'DATASET_UPDATE'"
        @click="$emit('removeNode', node.id)"
      >
        <img src="../../../resources/img/delete.png" alt="삭제" />
      </button>
    </div>
    <hr />
    <div class="content">
      <h3>{{ node.label }}</h3>
    </div>
    <Handle
      v-if="node.label !== 'DATASET_UPDATE'"
      type="source"
      position="right"
    />
    <Handle
      v-if="node.label === 'DATASET_UPDATE' || node.label !== 'DATASET_UPDATE'"
      type="target"
      position="left"
    />
  </div>
</template>

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

<script>
export default {
  components: { Handle, Position },
  props: {
    node: Object,
  },
};
</script>

<style scoped>
.node {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  width: 300px;
  height: 150px;
}
.header {
  display: flex;
  justify-content: flex-end;
}
.header button {
  width: 20px;
  height: 20px;
  margin: 0 0 5px 10px;
}
.header button img {
  width: 100%;
  height: 100%;
}
.content {
  margin-top: 20px;
}
</style>