import React from "react";
import { LuChevronLeft } from "react-icons/lu";

export default function BreadcrumbBar({
  breadcrumb = [],
  canBack = false,
  onRoot,
  onCrumb,
  onBack,
}) {
  return (
    <div className="mb-3 flex flex-wrap items-center gap-2 text-sm dark:text-white/80 text-black/70">
      <button
        type="button"
        className="px-3 py-1.5 rounded-xl border border-black/10 dark:border-white/10 bg-[#A1E3F919] hover:bg-black/5 shadow dark:hover:bg-white/10"
        onClick={onRoot}
      >
        همه پوشه‌ها
      </button>

      {breadcrumb.map((c, i) => (
        <React.Fragment key={String(c.id)}>
          <span className="opacity-50">/</span>
          <button
            type="button"
            className="px-3 py-1.5 rounded-xl border border-black/10 dark:border-white/10 hover:bg-black/5 bg-[#A1E3F919] shadow dark:hover:bg-white/10 truncate max-w-[180px]"
            onClick={() => onCrumb?.(i)}
          >
            {c.name}
          </button>
        </React.Fragment>
      ))}

      {canBack && (
        <button
          type="button"
          onClick={onBack}
          className="ms-auto px-3 py-2 rounded-xl border border-black/10 bg-[#A1E3F919] dark:border-white/10 shadow hover:bg-black/5 dark:hover:bg-white/10 text-xs sm:text-sm inline-flex items-center gap-2"
        >
          <LuChevronLeft className="w-4 h-4 rotate-180 text-[#43BEFF] dark:text-white" />
          برگشت
        </button>
      )}
    </div>
  );
}
