<script setup>
const props = defineProps({
  items: Array,
});
</script>

<template>
  <ul class="space-y-3">
    <li v-for="item in items">
      <a
        :href="`#${item.id}`"
        class="font-semibold group-[.subheadings]:font-normal hover:text-orange-500 hover:underline underline-offset-4"
      >
        {{ item.content }}
      </a>

      <TocList
        class="mt-3 ml-5 group subheadings"
        v-if="item.subheadings.length"
        :items="item.subheadings"
      />
    </li>
  </ul>
</template>