<script setup lang="ts">
import type { PropType } from 'vue'

interface TocLink {
  id: string
  text: string
  level: number
  children: TocLink[]
}

defineProps({
  links: {
    type: Array as PropType<TocLink[]>,
    required: true,
  },
  checkActive: {
    type: Function as PropType<(hash: string) => string | null>,
    required: true,
  },
  scrollToHeading: {
    type: Function as PropType<(id: string) => void>,
    required: true,
  },
  visibleHeadings: {
    type: Set as unknown as PropType<Set<string>>,
    default: () => new Set(),
  },
  activeHeading: {
    type: String as PropType<string | null>,
    default: null,
  },
  clickedHeading: {
    type: String as PropType<string | null>,
    default: null,
  },
})
</script>

<template>
  <Menu v-if="links && links.length" class="w-full">
    <MenuItem v-for="link in links" :key="link.id">
      <a
        class="block px-2 py-1 rounded cursor-pointer transition-colors"
        :class="[
          clickedHeading === link.id
            ? 'text-primary font-semibold bg-primary/10'
            : visibleHeadings.has(link.id)
              ? 'text-base-content font-medium bg-base-300'
              : 'text-base-content hover:bg-accent/10',
        ]"
        @click.prevent="scrollToHeading(link.id)"
      >
        {{ link.text }}
      </a>
      <TocTree
        v-if="link.children && link.children.length"
        :links="link.children"
        :check-active="checkActive"
        :scroll-to-heading="scrollToHeading"
        :visible-headings="visibleHeadings"
        :active-heading="activeHeading"
        :clicked-heading="clickedHeading"
      />
    </MenuItem>
  </Menu>
</template>
