<script lang="ts">
	export type BreadcrumbItem = {
		label: string;
		href?: string;
	};

	interface Props {
		items: BreadcrumbItem[];
		class?: string;
	}

	let { items, class: className = '' }: Props = $props();
</script>

<div class={['breadcrumbs mb-4 text-sm', className].filter(Boolean)}>
	<ul>
		{#each items as item (item.label)}
			<li>
				{#if item.href}
					<a href={item.href} class="text-primary hover:underline">{item.label}</a>
				{:else}
					{item.label}
				{/if}
			</li>
		{/each}
	</ul>
</div>


