---
import { Icon } from 'astro-icon/components'
import { SITE } from '@/consts'

export interface BreadcrumbItem {
  href?: string
  label: string
  icon?: string
}

interface Props {
  items: BreadcrumbItem[]
}

const { items } = Astro.props

const breadcrumbStructuredData = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": SITE.href
    },
    ...items.map((item, index) => ({
      "@type": "ListItem",
      "position": index + 2,
      "name": item.label,
      ...(item.href && { "item": new URL(item.href, SITE.href).toString() })
    }))
  ]
}
---

<!-- Breadcrumb Structured Data -->
<script type="application/ld+json" is:inline set:html={JSON.stringify(breadcrumbStructuredData)} />

<nav aria-label="breadcrumb" data-slot="breadcrumb">
  <ol
    data-slot="breadcrumb-list"
    class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"
  >
    <li data-slot="breadcrumb-item" class="inline-flex items-center gap-1.5">
      <a
        href="/"
        aria-label="Home"
        title="Home"
        data-slot="breadcrumb-link"
        class="hover:text-foreground transition-colors"
      >
        <span class="sr-only">Home</span>
        <Icon name="lucide:home" class="size-4" />
      </a>
    </li>
    {
      items.map((item, index) => (
        <>
          <li
            data-slot="breadcrumb-separator"
            role="presentation"
            aria-hidden="true"
            class="[&>svg]:size-3.5"
          >
            <Icon name="lucide:chevron-right" class="size-3.5" />
          </li>
          <li data-slot="breadcrumb-item" class="inline-flex items-center gap-1.5">
            {index === items.length - 1 ? (
              <span
                data-slot="breadcrumb-page"
                role="link"
                aria-disabled="true"
                aria-current="page"
                class="text-foreground font-normal max-w-[200px] sm:max-w-none"
              >
                <span class="flex items-center gap-x-2 overflow-hidden">
                  {item.icon && <Icon name={item.icon} class="size-4 shrink-0" />}
                  <span class="truncate">{item.label}</span>
                </span>
              </span>
            ) : (
              <a
                href={item.href}
                data-slot="breadcrumb-link"
                class="hover:text-foreground transition-colors"
              >
                <span class="flex items-center gap-x-2">
                  {item.icon && <Icon name={item.icon} class="size-4" />}
                  {item.label}
                </span>
              </a>
            )}
          </li>
        </>
      ))
    }
  </ol>
</nav>
