<script setup>
defineProps({
  routes: {
    type: Array,
    default: () => [],
  },
  light: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div v-if="routes.length" class="flex flex-wrap gap-2">
    <NuxtLink
      v-for="route in routes"
      :key="`${route.label}-${route.href}`"
      :to="route.href"
      class="inline-flex items-center gap-2 rounded-full border px-3 py-2 text-xs transition-all duration-300"
      :class="
        light
          ? 'border-white/20 bg-white/10 text-white/88 hover:border-white/35 hover:bg-white/15'
          : 'border-gm-border bg-white text-[#555] hover:border-gm-green hover:text-gm-green'
      "
    >
      <span class="opacity-65">{{ route.label }}</span>
      <span class="font-mono text-[11px]">{{ route.path || route.href }}</span>
    </NuxtLink>
  </div>
</template>
