<script setup lang="ts">
import type { Link } from '@/types/link'

defineProps<{
  links?: Link[]
}>()
</script>

<template>
  <aside
    class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--header-height))] lg:sticky lg:top-[--header-height] py-8 lg:px-4 lg:-mx-4"
  >
    <div class="relative">
      <div
        v-if="$slots.top"
        class="sticky -top-8 -mt-8 pointer-events-none z-[1]"
      >
        <div class="h-8 bg-background -mx-4 px-4" />
        <div class="bg-background relative pointer-events-auto flex -mx-4 px-4">
          <slot name="top" />
        </div>
        <div class="h-8 bg-gradient-to-b from-background -mx-4 px-4" />
      </div>

      <slot name="links">
        <UiAsideLinks :links="links" />
      </slot>

      <slot />

      <slot name="bottom" />
    </div>
  </aside>
</template>
