<template>
  <nav class="my-0 text-[1.1rem] leading-normal font-light grid gap-1">
    <h3 :class="headingClass" class="mt-0 mb-2 font-serif text-xl font-semibold leading-tight">
      {{ props.heading.label }}
    </h3>
    <ul class="list-none list-outside my-0">
      <li class="mb-1" v-for="item in items">
        <AisLink v-bind="item" class="!text-white hover:!underline" />
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { computed } from 'vue';
import AisLink from '@/components/link/AisLink.vue'

const props = defineProps({
  heading: { type: Object, default: { label: '', visible: false } },
  items: { type: Array, default: [] }
})

const headingClass = computed(() => props.heading.visible ? "" : "sr-only")
</script>
