<template>
  <div v-if="links.length > 3">
    <div class="flex flex-wrap -mb-1">
      <template v-for="(link, index) in links">
        <div
          v-if="link.url === null"
          :key="link.label"
          class="mr-1 mb-1 px-3 py-2 text-sm text-gray-400"
          v-html="link.label"
        />
        <Link
          v-else
          :key="link.url || link.label"
          :href="link.url"
          class="mr-1 mb-1 px-3 py-2 text-sm border rounded hover:bg-gray-50"
          :class="{ 'bg-brand-blue text-white': link.active }"
          v-html="link.label"
        />
      </template>
    </div>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({
  links: Array
})
</script>
