"use client";
import React from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { ChevronRight } from "lucide-react";

/**
 * heading (افتراضياً true): آخر عنصر في المسار هو اسم الصفحة الظاهر، فيُعرض كـ <h1>
 * بنفس الشكل تماماً — هذا يمنح كل صفحة عنواناً رئيسياً واحداً لمحركات البحث.
 * مرّر heading={false} في الصفحات التي تحتوي <h1> خاصاً بها.
 */
const Breadcrumb = ({ pages, heading = true }: { pages?: any[]; heading?: boolean }) => {
  const { t } = useTranslation()
  const breadcrumbItems = [
    { name: t("routes.home"), link: "/" },
    ...(pages || [])
  ];

  return (
    <nav className="bg-[#F5F5F5] px-3 mb-4" aria-label="Breadcrumb">
      <div className="layout !py-3">
        <ol className="flex items-center flex-wrap w-full m-0 gap-1" role="list">
          {breadcrumbItems.map((item, index) => {
            const isLast = index === breadcrumbItems.length - 1;
            return (
              <li key={index} className="flex items-center *:capitalize" role="listitem">
                {/* Breadcrumb Item */}
                <div className={`
                  text-wrap md:whitespace-nowrap
                  ${isLast
                    ? 'text-primary-tw font-medium'
                    : 'text-gray-400'
                  }
                `}>
                  {isLast ? (
                    heading && index > 0 ? (
                      <h1 className="m-0" aria-current="page" title={item.name || item}>
                        {item.name || item}
                      </h1>
                    ) : (
                      <span aria-current="page" title={item.name || item}>
                        {item.name || item}
                      </span>
                    )
                  ) : (
                    item.link ? (
                      <Link
                        to={item.link}
                        className="hover:text-gray-600 transition-colors duration-200"
                        title={item.name || item}
                      >
                        {item.name || item}
                      </Link>
                    ) : (
                      <button
                        onClick={() => window.history.back()}
                        className="hover:text-gray-600 transition-colors duration-200"
                        title={item.name || item}
                        type="button"
                      >
                        {item.name || item}
                      </button>
                    )
                  )}
                </div>

                {/* Separator - don't show after last item */}
                {!isLast && (
                  <span className={`mx-2 text-gray-400 flex-shrink-0 rtl:rotate-180`}>
                    <ChevronRight size={15} />
                  </span>
                )}
              </li>
            );
          })}
        </ol>
      </div>
    </nav>
  );
};
export default React.memo(Breadcrumb);
// truncate max-w-[200px]