// Breadcrumb — shows current drill path, each step clickable to jump back

function Breadcrumb({ drill, setDrill, resolveCountryName }) {
  const items = [{ label: "España", icon: "🇪🇸", level: "world", arg: null, root: true }];
  items.push({ label: "Mundo", level: "world", arg: null });
  if (drill.level === "continent" || drill.level === "country") {
    items.push({ label: drill.continent, level: "continent", arg: drill.continent });
  }
  if (drill.level === "country") {
    const label = resolveCountryName ? resolveCountryName(drill.country) : drill.country;
    items.push({ label, level: "country", arg: drill.country });
  }

  function jump(idx) {
    const it = items[idx];
    if (it.root) return; // España root not clickable
    if (it.level === "world")     setDrill({ level: "world",     continent: null, country: null });
    if (it.level === "continent") setDrill({ level: "continent", continent: it.arg, country: null });
    if (it.level === "country")   setDrill({ level: "country",   continent: drill.continent, country: it.arg });
  }

  return (
    <nav className="cf-crumb" aria-label="Breadcrumb">
      {items.map((it, i) => {
        const last = i === items.length - 1;
        return (
          <React.Fragment key={i}>
            {i > 0 && <span className="cf-crumb-sep">›</span>}
            <button
              className={"cf-crumb-step" + (last ? " current" : "") + (it.root ? " root" : "")}
              onClick={() => jump(i)}
              disabled={last || it.root}
            >
              {it.icon && <span className="cf-crumb-icon">{it.icon}</span>}
              {it.label}
            </button>
          </React.Fragment>
        );
      })}
    </nav>
  );
}

window.Breadcrumb = Breadcrumb;