<template>
  <div class="kole-breadcrumb">
    <template v-for="(it, i) in items" :key="i">
      <span class="kole-breadcrumb-item" :class="{ 'is-current': i === items.length - 1 }"
            @click="i !== items.length - 1 && emit('select', it)">{{ it.label }}</span>
      <span v-if="i !== items.length - 1" class="kole-breadcrumb-sep">/</span>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({ items: { type: Array, default: () => [] } });
const emit = defineEmits(['select']);
</script>

<style src="./Breadcrumb.css"></style>
