<script setup lang="ts">
export interface BreadcrumbItem {
  label: string
  to?: string
}

defineProps<{ items: BreadcrumbItem[] }>()
</script>

<template>
  <nav class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 mb-6">
    <template v-for="(item, i) in items" :key="i">
      <span v-if="i > 0" class="text-slate-300 dark:text-slate-600">/</span>
      <router-link v-if="item.to" :to="item.to" class="hover:text-accent-500 transition-colors">{{ item.label }}</router-link>
      <span v-else class="text-slate-800 dark:text-slate-200 font-medium">{{ item.label }}</span>
    </template>
  </nav>
</template>
