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

interface Props {
  items: Crumb[];
}

const { items } = Astro.props;
const lastIndex = items.length - 1;
---

<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    {
      items.map((item, index) => {
        const isLast = index === lastIndex;
        const isLink = item.href && !isLast;
        return (
          <li>
            {isLink ? (
              <a href={item.href}>{item.label}</a>
            ) : (
              <span aria-current={isLast ? 'page' : undefined}>{item.label}</span>
            )}
          </li>
        );
      })
    }
  </ol>
</nav>
