import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { forwardRef } from "react";
import { S as StChevronLeft } from "../../StChevronLeft-D60BtMQy.js";
import { cn } from "../utils/cn.js";
import { Link } from "../link/link.js";
const Breadcrumb = forwardRef(
  ({ items, className, showBackButton = true, backButtonHref, onBackClick }, ref) => {
    return /* @__PURE__ */ jsx(
      "nav",
      {
        ref,
        "aria-label": "Breadcrumb",
        className: cn("hidden md:block", className),
        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
          showBackButton && /* @__PURE__ */ jsx(
            BackButton,
            {
              backButtonHref,
              onBackClick
            }
          ),
          /* @__PURE__ */ jsx(
            "ol",
            {
              className: cn(
                "flex items-center",
                // Add left margin if back button is shown
                showBackButton && "ml-3"
              ),
              children: items.map((item, index) => {
                const isLast = index === items.length - 1;
                const isCurrent = item.current || !item.href && isLast;
                return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
                  isCurrent ? /* @__PURE__ */ jsx(
                    "span",
                    {
                      "aria-current": "page",
                      className: "font-medium text-strong",
                      children: item.label
                    }
                  ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
                    Link,
                    {
                      href: item.href,
                      className: cn(
                        "text-subtle hover:text-strong transition-colors",
                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-sm"
                      ),
                      children: item.label
                    }
                  ) }),
                  !isLast && /* @__PURE__ */ jsx(
                    "span",
                    {
                      className: "mx-2 text-disabled text-sm",
                      "aria-hidden": "true",
                      children: "/"
                    }
                  )
                ] }, index);
              })
            }
          )
        ] })
      }
    );
  }
);
Breadcrumb.displayName = "Breadcrumb";
const BackButton = ({ onBackClick, backButtonHref }) => {
  const handleBackClick = (e) => {
    if (onBackClick) {
      e.preventDefault();
      onBackClick();
    } else if (!backButtonHref) {
      e.preventDefault();
      document.documentElement.classList.remove("push", "pop");
      document.documentElement.classList.add("pop");
      window.history.back();
    }
  };
  const baseClasses = cn(
    "inline-flex items-center transition-colors cursor-pointer",
    "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-md",
    "hover:bg-subtle group",
    "px-1 py-1.5 -ml-1"
  );
  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(StChevronLeft, { className: "h-5 w-5 text-subtle", "aria-hidden": "true" }),
    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go back" })
  ] });
  if (backButtonHref) {
    return /* @__PURE__ */ jsx(Link, { href: backButtonHref, className: baseClasses, "aria-label": "Go back", children: content });
  }
  return /* @__PURE__ */ jsx(
    "button",
    {
      onClick: handleBackClick,
      className: baseClasses,
      "aria-label": "Go back",
      type: "button",
      children: content
    }
  );
};
export {
  Breadcrumb
};
