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

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

<template>
  <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
    <li v-for="(link, index) of links" class="h-full">
      <NavigationMenuLink as-child>
        <UiLink
          v-bind="omit(link, ['label', 'icon'])"
          active-class="bg-muted text-primary"
          inactive-class="hover:bg-muted/50"
          class="flex h-full items-center select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
          @click="link.click"
        >
          <UiIcon v-if="link.icon" :name="link.icon" class="mr-2" />
          <div>
            <div
              class="text-sm font-medium leading-none flex items-center space-x-1"
            >
              <span>{{ link.label }}</span>
              <UiIcon
                v-if="link.target === '_blank'"
                name="i-ph:arrow-up-right-light"
                class="text-xs"
              />
            </div>

            <p
              v-if="link.description"
              class="line-clamp-2 text-xs leading-snug text-muted-foreground mt-2"
            >
              {{ link.description }}
            </p>
          </div>
        </UiLink>
      </NavigationMenuLink>
    </li>
  </ul>
</template>
