<template>
  <component :is="wrapper" :class="[wrapperClass]">
    <template v-for="(part, i) in parts" :key="i">
      <a
        v-if="part.external"
        :href="part.external"
        target="_blank"
        rel="noopener noreferrer"
        class="inline-kw-link inline-kw-external"
      >{{ part.text }}</a>
      <router-link
        v-else-if="part.to"
        :to="part.to"
        class="inline-kw-link"
      >{{ part.text }}</router-link>
      <span v-else class="inline-kw-plain">{{ part.text }}</span>
    </template>
  </component>
</template>

<script setup>
import { computed } from 'vue'
import { parseBrochureRichText } from '../utils/brochureRichText'

const props = defineProps({
  /** 原始字符串，支持 [[br:topic|文案]] 与自动关键词 */
  text: { type: String, default: '' },
  /** 外层标签：p / span / div，默认 span（便于放进 li、h3 下） */
  as: { type: String, default: 'span' },
  wrapperClass: { type: String, default: '' },
  autoKeyword: { type: Boolean, default: true },
  maxAutoLinks: { type: Number, default: 14 }
})

const wrapper = computed(() => props.as || 'span')

const parts = computed(() =>
  parseBrochureRichText(props.text, {
    autoKeyword: props.autoKeyword,
    maxAutoLinks: props.maxAutoLinks
  })
)
</script>

<style scoped>
.inline-kw-link {
  color: #5ee4ff;
  text-decoration: underline;
  text-decoration-color: rgba(94, 228, 255, 0.45);
  text-underline-offset: 3px;
  font-weight: 500;
}
.inline-kw-link:hover {
  color: #9ff5ff;
  text-decoration-color: #9ff5ff;
}
.inline-kw-external {
  color: #7ad8c7;
}
.inline-kw-external:hover {
  color: #a8f0e3;
}
.inline-kw-plain {
  white-space: pre-wrap;
}
</style>
