<script lang="ts">
	import { ChevronRight, Folder, Home } from 'lucide-svelte';

	interface Breadcrumb {
		id: string | null;
		name: string;
	}

	let {
		breadcrumbs,
		onNavigate
	}: {
		breadcrumbs: Breadcrumb[];
		onNavigate: (folderId: string | null) => void;
	} = $props();
</script>

<nav aria-label="Breadcrumb" class="flex items-center gap-1 text-sm">
	{#each breadcrumbs as crumb, index}
		{#if index > 0}
			<ChevronRight class="h-4 w-4 text-slate-400" />
		{/if}

		{#if index === breadcrumbs.length - 1}
			<!-- Current page (not clickable) -->
			<span class="flex items-center gap-1.5 px-2 py-1 font-medium text-slate-900">
				{#if index === 0}
					<Home class="h-4 w-4" />
				{:else}
					<Folder class="h-4 w-4" />
				{/if}
				{crumb.name}
			</span>
		{:else}
			<!-- Clickable breadcrumb -->
			<button
				onclick={() => onNavigate(crumb.id)}
				class="flex items-center gap-1.5 rounded-md px-2 py-1 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-colors"
			>
				{#if index === 0}
					<Home class="h-4 w-4" />
				{:else}
					<Folder class="h-4 w-4" />
				{/if}
				{crumb.name}
			</button>
		{/if}
	{/each}
</nav>
