<script lang="ts">
	import { IconChevronRight } from '$lib/components/icons';

	interface BreadcrumbItem {
		label: string;
		href?: string;
	}

	interface Props {
		items: BreadcrumbItem[];
	}

	const { items }: Props = $props();
</script>

<nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-[var(--text-tertiary)]">
	{#each items as item, i}
		{#if i > 0}
			<IconChevronRight size={14} />
		{/if}
		{#if item.href}
			<a href={item.href} class="hover:text-[var(--text-link)] transition-colors">{item.label}</a>
		{:else}
			<span class="text-[var(--text-secondary)]">{item.label}</span>
		{/if}
	{/each}
</nav>
