<script setup lang="ts">
import { Link } from "@inertiajs/vue3";

defineProps<{
  crumbs: Array<{ label: string; route?: string | null }>;
}>();
</script>

<template>
  <nav
    v-if="crumbs.length"
    aria-label="breadcrumb"
    class="flex items-center gap-1.5 text-sm"
  >
    <template v-for="(crumb, i) in crumbs" :key="crumb.label">
      <span v-if="i > 0" class="text-muted-foreground/50" aria-hidden="true"
        >/</span
      >
      <Link
        v-if="crumb.route"
        :href="crumb.route"
        class="text-muted-foreground transition-colors hover:text-foreground"
        >{{ crumb.label }}</Link
      >
      <span v-else class="font-medium text-foreground">{{ crumb.label }}</span>
    </template>
  </nav>
</template>
