<template>
  <div class="table-node">
    <div class="table-node__content" v-html="safeHtml"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  node: {
    type: Object,
    default: () => ({})
  }
})

const safeHtml = computed(() => String(props.node?.content_payload?.table_body_html || ''))
</script>

<style scoped lang="scss">
.table-node {
  border: 1px solid #eaecf0;
  border-radius: 6px;
  overflow: hidden;
}

.table-node__content {
  padding: 8px;
}

.table-node__content :deep(table) {
  width: 100%;
  border-collapse: collapse;
}

.table-node__content :deep(td),
.table-node__content :deep(th) {
  border: 1px solid #d0d5dd;
  padding: 6px;
  vertical-align: top;
}
</style>
