Breadcrumb

---
/**
 * Horizontal trail: `Link` segments with `isMeta` (monospace) plus optional
 * final segment without `href` (current page, `aria-current="page"`).
 */
import Link from '../0_atoms/Link.astro'
import BreadcrumbSeparator from '../1_molecules/BreadcrumbSeparator.astro'

export interface BreadcrumbItem {
  label: string
  /** Omit for the current page segment (plain text, not a link). */
  href?: string
}

interface Props {
  items: BreadcrumbItem[]
  class?: string
}

const { items, class: className } = Astro.props
---

{
  items.length > 0 && (
    <nav
      aria-label="Breadcrumb"
      class:list={[
        'mb-6 flex flex-wrap items-center text-sm font-mono font-normal text-ink-faint',
        className,
      ]}
    >
      {items.map((item, index) => (
        <span class="contents">
          {index > 0 && <BreadcrumbSeparator />}
          {item.href ? (
            <Link
              href={item.href}
              isMeta
              variant="default"
              class="text-accent underline-offset-2 hover:underline shrink-0 text-ink-faint"
            >
              {item.label}
            </Link>
          ) : (
            <span class="shrink-0 text-ink-faint" aria-current="page">
              {item.label}
            </span>
          )}
        </span>
      ))}
    </nav>
  )
}