<script setup>
import { Browser } from "@capacitor/browser"

const props = defineProps({
  links: {
    type: Array,
    required: true,
  },
})

/**
 * Öffnet externen Link in iOS/Android über InApp Browser.
 * Öffnet externen Link im Web über window.open.
 * Interne Links → navigateTo
 */
async function openLink(link) {
  if (link.external) {
    window.open(link.to, "_blank")

  } else {
    return navigateTo(link.to)
  }
}
</script>

<template>
  <UDashboardCard
      v-if="links.length > 0"
      title="Schnellzugriffe"
  >
    <div class="space-y-2">

      <div
          v-for="(link, index) in links"
          :key="index"
          class="
          p-3 bg-gray-50 dark:bg-gray-900
          rounded-xl border flex items-center justify-between
          active:scale-95 transition cursor-pointer
        "
          @click="openLink(link)"
      >
        <div class="flex items-center gap-3">
          <UIcon
              :name="link.icon || 'i-heroicons-link'"
              class="w-6 h-6 text-primary-500"
          />
          <span class="font-medium truncate max-w-[60vw]">
            {{ link.label }}
          </span>
        </div>

        <UIcon
            name="i-heroicons-chevron-right-20-solid"
            class="w-5 h-5 text-gray-400"
        />
      </div>

    </div>
  </UDashboardCard>
</template>
