---
interface Props {
	items: Array<{
		text: string
		href?: string | undefined
	}>
}
---

<nav>
	<ol vocab="https://schema.org/" typeof="BreadcrumbList" class="inline-flex items-center flex-wrap px-0 mb-4">
		{Astro.props.items.map((el, index) => (
			<li property="itemListElement" typeof="ListItem" class="inline-block px-0">
				{index > 0 && (
					<span class="text-gray-900 dark:text-gray-100 mx-4">/</span>
				)}
				{el.href ? (
					<a class="text-gray-900 dark:text-gray-100 font-normal" href={el.href} property="item" typeof="WebPage">
						<span property="name">{el.text}</span>
					</a>
				) : (
					<span class="font-bold" property="name">{el.text}</span>
				)}
				<meta property="position" content={index.toString()} />
			</li>
		))}
	</ol>
</nav>