<template>
  <div
    class="heading-node"
    :class="`heading-node--h${safeLevel}`"
    :data-node-id="node?.node_id || ''"
    data-semantic-type="heading"
    :data-heading-level="safeLevel"
  >
    {{ text }}
  </div>
</template>

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

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

const text = computed(() => String(props.node?.content_payload?.text || '').trim() || '未命名标题')
const safeLevel = computed(() => {
  const level = Number(props.node?.content_payload?.heading_level || 1)
  if (level < 1) return 1
  if (level > 6) return 6
  return level
})
</script>

<style scoped lang="scss">
.heading-node {
  color: #101828;
  line-height: 1.7;
  word-break: break-word;
}

.heading-node--h1 { font-size: 22px; font-weight: 700; }
.heading-node--h2 { font-size: 20px; font-weight: 700; }
.heading-node--h3 { font-size: 18px; font-weight: 700; }
.heading-node--h4 { font-size: 16px; font-weight: 600; }
.heading-node--h5 { font-size: 15px; font-weight: 600; }
.heading-node--h6 { font-size: 14px; font-weight: 600; }
</style>
