<template>
    <span ref="iconRef" class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="left" :title="text" style="cursor: pointer;">
        <HelpCircle size="1rem" class="text-muted" />
    </span>
</template>
<script>
import { ref, onMounted } from 'vue'
import { HelpCircle } from 'lucide-vue-next'

export default {
    name: 'InfoTooltip',
    components: { HelpCircle },
    props: {
        text: {
            type: String,
            required: true,
        },
    },
    setup() {
        const iconRef = ref(null)

        onMounted(() => {
            if (window.bootstrap && iconRef.value) {
                new window.bootstrap.Tooltip(iconRef.value)
            } else {
                console.warn('Bootstrap JS not loaded — tooltip not initialized.')
            }
        })

        return { iconRef }
    },
}
</script>