<script setup lang="ts">
import type { BreadcrumbItem } from '@/types'

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

const emit = defineEmits<{
  'navigate': [item: BreadcrumbItem]
}>()
</script>

<template>
  <v-breadcrumbs :items="items as any" class="px-4 py-2">
    <template #item="{ item }">
      <v-breadcrumbs-item
        :disabled="false"
        class="breadcrumb-clickable"
        @click="emit('navigate', (item as unknown) as BreadcrumbItem)"
      >
        <v-icon v-if="((item as unknown) as BreadcrumbItem).isRoot" size="small" class="mr-1">mdi-home</v-icon>
        {{ ((item as unknown) as BreadcrumbItem).label }}
      </v-breadcrumbs-item>
    </template>
  </v-breadcrumbs>
</template>

<style scoped>
.breadcrumb-clickable {
  cursor: pointer;
}
</style>
