<script setup>
defineProps({
  links: {
    type: [Array, Object],
    required: true,
  },
});
</script>
<template>
  <nav>
    <ul class="inline-flex -space-x-px text-sm">
      <li v-for="(link, key) in links" :key="key">
        <a
          :disabled="link.active"
          :href="link.url"
          v-html="link.label"
          :class="`flex items-center justify-center px-3 h-8 ${
            link.active
              ? 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700'
              : 'leading-tight text-gray-500 bg-white border border-gray-300  hover:bg-gray-100 hover:text-gray-700'
          } ${key === 0 ? 'rounded-s-lg' : ''} ${key === links.length -1 ? 'rounded-e-lg' : ''}`"
        ></a>
      </li>
    </ul>
  </nav>
</template>
