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

    const {
        items = [],
    }: {
        items: BreadcrumbItem[];
    } = $props();
</script>

<nav class="section breadcrumbs" aria-label="Breadcrumbs">
    <div class="container">
        <ol class="list">
            {#each items as item, index}
                <li class="item">
                    {#if item.href}
                        <a href={item.href}>{item.label}</a>
                        {#if index < items.length - 1}<span
                                class="separator"
                                aria-hidden="true">&gt;</span
                            >{/if}
                    {:else}
                        {item.label}
                    {/if}
                </li>
            {/each}
        </ol>
    </div>
</nav>

<style>
    .breadcrumbs {
        padding: var(--space-md) 0;
        font-size: var(--font-size-small);
        color: var(--color-text-secondary);
    }

    .list {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .item {
        display: inline;
    }

    .item a {
        color: var(--color-text-secondary);
        text-decoration: none;
    }

    .separator {
        font-size: var(--font-size-small);
        margin-inline: var(--space-xs);
    }
</style>
