<script setup lang="ts">
import { useSectionStyle } from '../composables/useSectionStyle'

const props = defineProps<{
  sectionId: string
  sectionType: string
  editorMode?: boolean
  isSelected?: boolean
  /** Section settings 值（用于样式应用） */
  settings?: Record<string, unknown>
}>()

defineEmits<{
  (e: 'click'): void
}>()

const { style } = useSectionStyle(
  () => props.sectionId,
  () => props.settings ?? {},
)
</script>

<template>
<section
    :id="`section-${sectionId}`"
    :data-section-id="sectionId"
    :data-section-type="sectionType"
    class="section-wrapper"
    :class="[
      {
        'section-wrapper--selected': isSelected,
        'section-wrapper--hoverable': editorMode,
      },
      style.wrapperClasses,
      style.customClass,
    ]"
    :style="style.wrapperStyles"
    @click.stop="$emit('click')"
  >
    <slot />
  </section>

  <!-- Scoped CSS 注入（自定义间距 + custom_css） -->
  <component is="style" v-if="style.scopedCSS">
    {{ style.scopedCSS }}
  </component>
</template>

<style scoped>
.section-wrapper{position:relative}.section-wrapper--hoverable:hover{outline:2px solid rgba(22,119,255,.3);outline-offset:1px}.section-wrapper--selected{outline:2px solid #1677ff;outline-offset:1px}.section-wrapper--hoverable:hover:before{background:#1677ff;border-radius:4px;color:#fff;content:attr(data-section-type);font-size:12px;left:8px;padding:2px 8px;position:absolute;top:-24px;z-index:10}.section-wrapper :deep(.inline-editable){cursor:text;transition:outline .15s ease}.section-wrapper :deep(.inline-editable:hover){outline:1px dashed rgba(22,119,255,.4);outline-offset:2px}.section-wrapper :deep(.inline-editing){cursor:text;min-height:1em;min-width:20px;outline:2px solid #1677ff;outline-offset:2px}
</style>
