<script setup lang="ts">
defineProps({
  id: {
    type: String,
    required: true,
  },
})

const ui = computed(() => ({
  wrapper:
    'scroll-mt-[calc(48px+48px+var(--header-height))] lg:scroll-mt-[calc(48px+var(--header-height))]',
  icon: {
    wrapper:
      '-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:lg:opacity-100 transition-opacity',
    base: 'w-4 h-4 text-primary',
    name: 'i-ph:hash-duotone',
  },
}))
</script>

<template>
  <h2 :id="id" :class="ui.wrapper">
    <NuxtLink :href="`#${id}`" class="group">
      <div :class="ui.icon.wrapper">
        <div :class="[ui.icon.name, ui.icon.base]" />
      </div>

      <slot />
    </NuxtLink>
  </h2>
</template>
