<script lang="ts" setup>
import { sharedState } from '@slidev/client/state/shared'
import { computed } from '@vue/reactivity'
import { watch } from 'vue'
import { useBibliographyStore } from '../stores/bibliography'

const bibliography = useBibliographyStore()

const props = defineProps({
    item: String,
    prefix: String,
})

const position = computed<number>(() => {
    return [...bibliography.sources].findIndex(i => props.item === i)
})

watch(
    () => props.item,
    () => {
        if(!props.item) {
            return
        }
        bibliography.addSource(props.item)
    },
    { immediate: true }
)
</script>
<template>
    <span class="text-gray-400 text-sm align-text-top">
        {{ prefix }}
        [{{ position }}]
    </span>
</template>
