<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="(item, index) in items"
      :key="index"
      class="text-md opacity-50"
    >
      <NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
      <span v-else>{{ item.label }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
  defineProps({
    items: {
      type: Array as () => Array<{ label: string; to?: string }>,
      required: true,
    },
  });
</script>
