<script lang="ts">
	// Fil d'Ariane visible. Le JSON-LD BreadcrumbList est émis en parallèle par <Seo>.
	interface Props {
		items: { name: string; path: string }[];
	}
	let { items }: Props = $props();
</script>

<nav class="fil" aria-label="Fil d'Ariane">
	<ol>
		{#each items as item, i (item.path)}
			<li>
				{#if i < items.length - 1}
					<a href={item.path} class="no-underline">{item.name}</a>
					<span class="fil__sep" aria-hidden="true">/</span>
				{:else}
					<span aria-current="page">{item.name}</span>
				{/if}
			</li>
		{/each}
	</ol>
</nav>

<style>
	.fil {
		font-size: 0.82rem;
		color: var(--muted);
	}
	.fil ol {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin: 0 0 var(--space-3);
		padding: 0;
	}
	.fil li {
		display: inline-flex;
		gap: 0.4rem;
		align-items: center;
	}
	.fil a {
		color: var(--muted);
	}
	.fil a:hover {
		color: var(--accent);
	}
	.fil [aria-current='page'] {
		color: var(--creme);
	}
	.fil__sep {
		color: var(--muted-fort);
	}
</style>
