import type { ReactNode } from "react";
import { cn } from "../../lib/cn";

export type BreadcrumbItem = {
  content?: ReactNode;
  current?: boolean;
  href?: string;
  label?: string;
  onClick?: () => void;
};

export function Breadcrumbs({
  items,
}: {
  items: BreadcrumbItem[];
}) {
  return (
    <nav
      aria-label="Breadcrumb"
      className="flex flex-wrap items-center gap-2 text-sm text-[var(--uhuru-text-secondary)]"
    >
      {items.map((item, index) => (
        <span className="inline-flex items-center gap-2" key={`${item.label ?? "item"}-${index}`}>
          {item.href ? (
            <a
              className="inline-flex items-center gap-2 rounded-[var(--uhuru-radius-sm)] px-1 py-0.5 text-inherit no-underline transition hover:text-[var(--uhuru-text-primary)]"
              href={item.href}
            >
              {item.content ?? item.label}
            </a>
          ) : item.onClick ? (
            <button
              className="inline-flex items-center gap-2 rounded-[var(--uhuru-radius-sm)] border-0 bg-transparent px-1 py-0.5 text-inherit transition hover:text-[var(--uhuru-text-primary)]"
              onClick={item.onClick}
              type="button"
            >
              {item.content ?? item.label}
            </button>
          ) : (
            <span
              aria-current={item.current ? "page" : undefined}
              className={cn(
                "inline-flex items-center gap-2 px-1 py-0.5",
                item.current ? "text-[var(--uhuru-text-primary)]" : "",
              )}
            >
              {item.content ?? item.label}
            </span>
          )}
          {index < items.length - 1 ? <span>/</span> : null}
        </span>
      ))}
    </nav>
  );
}