<script setup lang="ts">
interface TocItem {
    text: string
    id: string
    children?: TocItem[]

    [key: string]: any
}
interface Props {
    link: TocItem;
}

const props = defineProps<Props>();
const hasChildren = computed(() => {
    return props.link && props.link.children && props.link.children.length > 0 || false;
});
</script>

<template>
    <div class="tree-item">
        <div class="tree-item-self" :class="{'is-clickable': hasChildren}" data-path="{{ props.link.title }}">
            <a class="tree-item-inner" :href="'#' + props.link.id">{{ props.link.text }}</a>
        </div>
        <div class="tree-item-children">
            <TocLink v-if="hasChildren" v-for="link of props.link.children" :link="link" />
        </div>
    </div>
</template>