import { forwardRef } from "react";

/**
 * Breadcrumb
 *
 * items:      { label: string, href?: string }[] - items with href render as <a>;
 *             the last item always renders as plain text regardless of href
 * aria-label: string - accessible label for the nav (default: "Breadcrumbs")
 */
const Breadcrumb = forwardRef(function Breadcrumb(
  {
    items = [],
    "aria-label": ariaLabel = "Breadcrumbs",
    className = "",
    ...props
  },
  ref
) {
  return (
    <nav
      ref={ref}
      className={["prs-breadcrumb", className].filter(Boolean).join(" ")}
      role="navigation"
      aria-label={ariaLabel}
      {...props}
    >
      <ol>
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li key={index} title={isLast ? item.label : undefined}>
              {isLast || !item.href ? (
                item.label
              ) : (
                <a href={item.href}>{item.label}</a>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
});

export default Breadcrumb;