import { Link } from "react-router-dom";

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

/**
 * Visual reference: DreamsERP theme detail pages
 * (.tmp/theme-reference/sales/salesQuotesDetails.tsx,
 * .tmp/theme-reference/crm/dealsDetails.tsx) — a small "Back link ›
 * Current page" trail above the page title on every detail/form screen.
 * Lives in core-web (not packages/ui) because it needs react-router's
 * `Link`, which the shared Design System deliberately avoids depending on
 * (see AppShell's router-agnostic `LinkComponent` prop).
 */
export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav aria-label="Navegação" className="mb-1 flex flex-wrap items-center gap-2 text-sm text-default">
      {items.map((item, index) => {
        const isLast = index === items.length - 1;
        return (
          <span key={`${item.label}-${index}`} className="flex items-center gap-2">
            {index > 0 ? <span aria-hidden="true">/</span> : null}
            {isLast || !item.href ? (
              <span className={isLast ? "text-title font-medium" : undefined}>{item.label}</span>
            ) : (
              <Link to={item.href} className="hover:text-primary">
                {item.label}
              </Link>
            )}
          </span>
        );
      })}
    </nav>
  );
}