"use client";

import Link from "next/link";

/**
 * Breadcrumb bar: <ol> per SEO rule; last item not linked, aria-current="page".
 * Same row can contain the toolbar (breadcrumb + toolbar together).
 */
export type BreadcrumbItem = { label: string; href?: string };

export function ShopBreadcrumbBar({ items }: { items: BreadcrumbItem[] }) {
  if (items.length === 0) return null;

  return (
    <nav aria-label="Breadcrumb" className="shrink-0">
      <ol className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-[var(--muted)]">
        {items.map((item, i) => {
          const isLast = i === items.length - 1;
          return (
            <li key={i} className="flex items-center gap-x-2">
              {i > 0 && (
                <span className="text-[var(--separator)]" aria-hidden>
                  /
                </span>
              )}
              {isLast ? (
                <span aria-current="page" className="font-medium text-[var(--foreground)]">
                  {item.label}
                </span>
              ) : item.href ? (
                <Link
                  href={item.href}
                  className="hover:text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)] rounded"
                >
                  {item.label}
                </Link>
              ) : (
                <span>{item.label}</span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}
