---
import Icon from "./Icon.astro";

const { items = [] } = Astro.props;
---

<nav aria-label="Breadcrumb" class="flex flex-wrap items-center gap-1 text-xs text-muted-foreground">
  {
    items.map((item, index) => (
      <span class="flex items-center gap-1">
        {index > 0 && <Icon name="chevron-right" class="h-3 w-3" />}
        {item.to ? (
          <a href={item.to} class="hover:text-foreground">{item.label}</a>
        ) : (
          <span class="text-foreground">{item.label}</span>
        )}
      </span>
    ))
  }
</nav>
