---
interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface Props {
  items: BreadcrumbItem[];
}

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

<nav class="mb-8 text-sm text-text-muted" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center gap-1">
    {items.map((item, i) => (
      <li class="flex items-center gap-1">
        {i > 0 && <span class="mx-1">/</span>}
        {item.href ? (
          <a href={item.href} class="hover:text-accent transition-colors">{item.label}</a>
        ) : (
          <span class="text-text">{item.label}</span>
        )}
      </li>
    ))}
  </ol>
</nav>