/* global React */
/* =============================================================================
   BREADCRUMBS
   Auto-derives from the same ROUTE_SEO breadcrumb config used for schema.
   Visible nav element matching the BreadcrumbList JSON-LD on each page.
   Renders nothing on the home route.
   ============================================================================= */

function Breadcrumbs({ route, navigate }) {
  const cfg = (window.__getRouteSEO && window.__getRouteSEO(route)) || null;
  if (!cfg || !cfg.breadcrumb || cfg.breadcrumb.length < 2) return null;

  return (
    <nav className="breadcrumbs" aria-label="Breadcrumb">
      <div className="container breadcrumbs-inner">
        <ol>
          {cfg.breadcrumb.map((b, i) => {
            const isLast = i === cfg.breadcrumb.length - 1;
            return (
              <li key={i}>
                {isLast ? (
                  <span aria-current="page">{b.name}</span>
                ) : (
                  <a
                    href={"#" + b.url}
                    onClick={(e) => { e.preventDefault(); navigate(b.url); }}
                  >{b.name}</a>
                )}
                {!isLast && <span className="bc-sep" aria-hidden="true">/</span>}
              </li>
            );
          })}
        </ol>
      </div>
    </nav>
  );
}

window.Breadcrumbs = Breadcrumbs;