"use client";

import Link from "next/link";
import type { BreadcrumbItem } from "@/lib/breadcrumbs";

export function Breadcrumb({
  items,
  backHref,
}: {
  items: BreadcrumbItem[];
  backHref?: string | null;
}) {
  if (items.length === 0 && !backHref) return null;

  return (
    <nav aria-label="مسیر صفحه" className="border-t border-black/5 bg-slate-50">
      <div className="flex w-full items-center gap-2 overflow-hidden px-4 py-1.5 text-xs text-slate-600 lg:px-6">
        {items.length > 0 ? (
          <ol className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
            {items.map((item, index) => {
              const last = index === items.length - 1;
              return (
                <li key={`${item.href}-${index}`} className="flex shrink-0 items-center gap-1">
                  {index > 0 ? (
                    <span className="text-slate-400" aria-hidden>
                      ›
                    </span>
                  ) : null}
                  {last ? (
                    <span className="font-semibold text-slate-800" dir="rtl">
                      {item.label}
                    </span>
                  ) : (
                    <Link href={item.href} className="hover:text-primary hover:underline" dir="rtl">
                      {item.label}
                    </Link>
                  )}
                </li>
              );
            })}
          </ol>
        ) : (
          <div className="min-w-0 flex-1" />
        )}
        {backHref ? (
          <Link
            href={backHref}
            className="flex shrink-0 items-center gap-1 font-medium text-slate-800 hover:text-primary lg:hidden"
          >
            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden>
              <path d="M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6z" />
            </svg>
            بازگشت
          </Link>
        ) : null}
      </div>
    </nav>
  );
}
