<template>
  <nav aria-label="Folder navigation">
    <ol class="flex items-center gap-1 text-sm flex-wrap">
      <!-- Root "Home" segment -->
      <li class="flex items-center gap-1">
        <button
          @click="emit('navigate', null)"
          class="text-indigo-600 hover:underline font-medium"
        >
          Home
        </button>
      </li>

      <template v-for="(segment, idx) in visibleSegments" :key="segment.id ?? 'ellipsis-' + idx">
        <!-- Separator -->
        <li class="shrink-0" aria-hidden="true">
          <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </li>

        <!-- Ellipsis (non-navigable) -->
        <li v-if="segment.id === 'ellipsis'" class="flex items-center">
          <span class="px-2 py-1 text-gray-400">…</span>
        </li>

        <!-- Last segment (current folder, non-clickable) -->
        <li v-else-if="idx === visibleSegments.length - 1" class="flex items-center">
          <span class="text-gray-900 font-medium">{{ segment.name }}</span>
        </li>

        <!-- Clickable segment -->
        <li v-else class="flex items-center">
          <button
            @click="emit('navigate', segment.id)"
            class="text-indigo-600 hover:underline font-medium"
          >
            {{ segment.name }}
          </button>
        </li>
      </template>
    </ol>
  </nav>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  segments: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['navigate'])

const visibleSegments = computed(() => {
  if (props.segments.length > 4) {
    return [
      props.segments[0],
      { id: 'ellipsis', name: '…' },
      ...props.segments.slice(-2),
    ]
  }
  return props.segments
})
</script>
