<template>
  <h5
    :id
    :class="['scroll-m-20 font-normal text-primary tracking-tight [&:not(:first-child)]:mt-6', themeSizeClass]"
  >
    <NuxtLink
      v-if="id && generate"
      :to="`#${id}`"
    >
      <slot />
    </NuxtLink>
    <slot v-else />
  </h5>
</template>

<script setup lang="ts">
const { id } = defineProps<{ id?: string }>()

const { headings } = useRuntimeConfig().public.mdc
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))

const { selectedTheme } = useTheme()
const themeSizeClass = computed(() => {
  return selectedTheme.value === 'classic'
    ? 'text-lg lg:text-xl'
    : 'text-xl lg:text-1xl'
})
</script>
