<script lang="ts">
	import { page } from '$app/stores';

	import * as Breadcrumb from '$lib/components/ui/breadcrumb';

	$: segments = $page.url.pathname.slice(1).split('/');
	$: breadcrumb = segments.map((segment, index) => {
		return {
			name: segment.charAt(0).toUpperCase() + segment.slice(1),
			href: '/' + segments.slice(0, index + 1).join('/')
		};
	}) as { name: string; href: string }[];
</script>

<Breadcrumb.Root>
	<Breadcrumb.List>
		{#each breadcrumb as { name, href }, index}
			<Breadcrumb.Item>
				<Breadcrumb.Link {href}>
					{name}
				</Breadcrumb.Link>
			</Breadcrumb.Item>
			{#if index < breadcrumb.length - 1}
				<Breadcrumb.Separator />
			{/if}
		{/each}
	</Breadcrumb.List>
</Breadcrumb.Root>
