/** مسیر راهنما (breadcrumb) همراه با داده ساختاریافته برای موتورهای جستجو */
import Link from "next/link";
import { site } from "@/lib/site";
import { Icon } from "./Icon";

export function Breadcrumbs({ items }: { items: { name: string; href?: string }[] }) {
  const all = [{ name: "زهورا", href: "/" }, ...items];
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: all.map((item, i) => ({
      "@type": "ListItem",
      position: i + 1,
      name: item.name,
      ...(item.href ? { item: new URL(item.href, site.url).toString() } : {}),
    })),
  };
  return (
    <nav aria-label="مسیر صفحه" className="scrollbar-none overflow-x-auto">
      <ol className="flex items-center gap-1 text-xs whitespace-nowrap text-muted">
        {all.map((item, i) => (
          <li key={i} className="flex items-center gap-1">
            {i > 0 && <Icon name="chevron-left" size={12} />}
            {item.href && i < all.length - 1 ? (
              <Link href={item.href} className="hover:text-ink">
                {item.name}
              </Link>
            ) : (
              <span className="text-ink-soft">{item.name}</span>
            )}
          </li>
        ))}
      </ol>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
    </nav>
  );
}