<script setup>
defineProps({
    path: { type: Array, default: () => [] },
})

const emit = defineEmits(['navigate'])
</script>

<template>
    <div class="breadcrumb">
        <span
            v-for="(item, index) in path"
            :key="index"
            class="breadcrumb-item"
            :class="{ active: index === path.length - 1 }"
            @click="index < path.length - 1 && emit('navigate', item, index)"
        >
            <span v-if="index > 0" class="separator"> &gt; </span>
            <span :class="{ 'cursor-pointer hover:text-[#00d2ff]': index < path.length - 1 }">
                {{ item.label }}
            </span>
        </span>
    </div>
</template>

<style scoped>
.breadcrumb {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 50;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #8892b0;
    background: rgba(26, 26, 46, 0.85);
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid rgba(0, 210, 255, 0.15);
    backdrop-filter: blur(8px);
}

.breadcrumb-item.active {
    color: #00d2ff;
}

.separator {
    color: #8892b0;
    opacity: 0.5;
    margin: 0 2px;
}
</style>
