<template>
    <span>
        <template v-for="(part, idx) in parts" :key="idx">
            <span v-if="part.match" :class="highlightClass">{{ part.text }}</span>
            <template v-else>{{ part.text }}</template>
        </template>
    </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
    text?: string;
    highlight?: string;
    type?: 'title' | 'content';
}>();

const highlightClass = computed(() => (props.type === 'title' ? 'qr-hl-title' : 'qr-hl-content'));

const escapeRegex = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

const parts = computed(() => {
    const text = props.text || '';
    const keyword = (props.highlight || '').trim();
    if (!keyword) {
        return [{ text, match: false }];
    }
    const regex = new RegExp(`(${escapeRegex(keyword)})`, 'ig');
    const segments = text.split(regex);
    return segments.map((seg) => ({
        text: seg,
        match: seg.toLowerCase() === keyword.toLowerCase(),
    }));
});
</script>

<style scoped>
.qr-hl-title {
    color: #1c66e5;
    font-weight: 500;
}

.qr-hl-content {
    color: #1c66e5;
}
</style>
