<script>"use strict";
import Icon from "./Icon.svelte";
export let breadcrumbTrail = [];
const showEllipses = breadcrumbTrail.length > 4;
const getBreadcrumb = (position) => breadcrumbTrail[position];
const lastIndex = breadcrumbTrail.length - 1;
const secondLastIndex = lastIndex - 1;
const thirdLastIndex = lastIndex - 2;
const hasBreadcrumbs = (index) => !!getBreadcrumb(index);
</script>

<nav class="flex items-center space-x-4 text-gray-600">
	<div class="flex">
		<a
			href={getBreadcrumb(secondLastIndex)?.link ?? '#'}
			class="text-stone-500"
			class:opacity-30={lastIndex === 0}
		>
			<Icon iconName="dropdown-left" />
		</a>
		<a href={getBreadcrumb(secondLastIndex)?.link ?? '#'} class="text-stone-600 opacity-30">
			<Icon iconName="dropdown-right" />
		</a>
	</div>

	<span class="border-l-2 border-stone-200 h-5"></span>

	{#if hasBreadcrumbs(0)}
		<a href={getBreadcrumb(0)?.link ?? '#'} class="text-stone-400">
			{#if getBreadcrumb(0)?.type === 'home-icon'}
				<Icon
					iconName="home"
					className={`text-stone-500 ${getBreadcrumb(0)?.state === 'inactive' ? 'opacity-30' : ''}`}
				/>
			{:else}
				{getBreadcrumb(0)?.name ?? 'Unknown'}
			{/if}
		</a>
		{#if lastIndex !== 0}
			<Icon iconName="chevron-right" className="mx-1" />
		{/if}
	{/if}

	{#if showEllipses}
		<span class="text-stone-400">...</span>
		<Icon iconName="chevron-right" />
	{/if}

	{#if hasBreadcrumbs(thirdLastIndex) && breadcrumbTrail.length > 3}
		<a href={getBreadcrumb(thirdLastIndex)?.link ?? '#'} class="text-stone-400">
			{getBreadcrumb(thirdLastIndex)?.name ?? 'Unknown'}
		</a>
		<Icon iconName="chevron-right" />
	{/if}

	{#if hasBreadcrumbs(secondLastIndex) && breadcrumbTrail.length > 2}
		<a href={getBreadcrumb(secondLastIndex)?.link ?? '#'} class="text-stone-400">
			{getBreadcrumb(secondLastIndex)?.name ?? 'Unknown'}
		</a>
		<Icon iconName="chevron-right" />
	{/if}

	{#if hasBreadcrumbs(lastIndex) && lastIndex !== 0}
		<span class="text-stone-950">
			{getBreadcrumb(lastIndex)?.name ?? 'Unknown'}
		</span>
	{/if}
</nav>
