---
import { cn } from '@/lib/cn';
import JsonLd from './JsonLd.astro';
import { createBreadcrumbSchema } from '@/lib/schema';
import siteConfig from '@/config/site.config';

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

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

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

// Build schema items with full URLs
const schemaItems = items.map((item) => ({
  name: item.label,
  url: item.href ? new URL(item.href, siteConfig.url).toString() : siteConfig.url,
}));

const schema = createBreadcrumbSchema(schemaItems);
---

<JsonLd schema={schema} />

<nav aria-label="Breadcrumb" class={cn('text-sm', className)}>
  <ol class="flex flex-wrap items-center gap-2">
    {
      items.map((item, index) => (
        <li class="flex items-center gap-2">
          {index > 0 && (
            <svg
              class="h-4 w-4 text-muted-foreground"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          )}
          {item.href && index !== items.length - 1 ? (
            <a href={item.href} class="text-muted-foreground hover:text-foreground transition-colors">
              {item.label}
            </a>
          ) : (
            <span class="text-foreground font-medium" aria-current={index === items.length - 1 ? 'page' : undefined}>
              {item.label}
            </span>
          )}
        </li>
      ))
    }
  </ol>
</nav>
