<script lang="ts">
  import "../iconify-offline";
  import Icon from "@iconify/svelte";

  /** @type {{ href?: string; label: string }[]} */
  let { items = [] } = $props();
</script>

<nav aria-label="Breadcrumb" class="overflow-x-auto">
  <ol class="list-none flex flex-nowrap items-center gap-x-1 text-xs py-4 pl-0 m-0!">
    {#each items as item, i}
      <li class="flex items-center gap-x-1.5 shrink-0 whitespace-nowrap">
        {#if item.href && i < items.length - 1}
          <a
            href={item.href}
            class="inline-flex font-medium no-underline items-center gap-1.5 text-stein-500 hover:text-wald-600 transition-colors duration-150 rounded px-1 -mx-1 py-0.5 -my-0.5"
            aria-label={i === 0 ? item.label : undefined}
          >
            {#if i === 0}
              <Icon icon="mdi:home" class="size-4 shrink-0" aria-hidden="true" />
            {:else}
              <span>{item.label}</span>
            {/if}
          </a>
        {:else}
          <span
            class="font-medium text-stein-800"
            aria-current={i === items.length - 1 ? 'page' : undefined}
          >
            {item.label}
          </span>
        {/if}
        {#if i < items.length - 1}
          <span aria-hidden="true" class="shrink-0 text-stein-300">
            <Icon icon="mdi:chevron-right" class="size-3.5" />
          </span>
        {/if}
      </li>
    {/each}
  </ol>
</nav>
