// @ts-nocheck
'use client';

import React, { ReactNode } from 'react';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { useTranslations } from 'next-intl';

type TBreadCrumbProps = {
  homeElement: ReactNode;
  separator: ReactNode;
  containerClasses?: string;
  listClasses?: string;
  activeClasses?: string;
  capitalizeLinks?: boolean;
};

const NextBreadcrumb = ({
  homeElement,
  separator,
  containerClasses,
  listClasses,
  activeClasses,
  capitalizeLinks,
}: TBreadCrumbProps) => {
  const paths = usePathname();
  const pathNames = paths.split('/').filter((path) => path);

  const t = useTranslations();

  return (
    <ul className={containerClasses}>
      <li className={listClasses}>
        <Link href={'/'}>{t(homeElement)}</Link>
      </li>
      {pathNames.length > 0 && separator}
      {pathNames.map((link, index) => {
        let href = `/${pathNames.slice(0, index + 1).join('/')}`;
        let itemClasses =
          paths === href ? `${listClasses} ${activeClasses}` : listClasses;
        let itemContent = capitalizeLinks
          ? link[0].toUpperCase() + link.slice(1, link.length)
          : link;

        // التحقق من وجود "ar" أو "en" في الرابط
        // تجاهل "ar" و "en" في بداية المسار
        if (index === 0 && (link === 'ar' || link === 'en')) {
          return null;
        }

        return (
          <React.Fragment key={index}>
            <li className={itemClasses}>
              {index === pathNames.length - 1 ? (
                t(decodeURIComponent(itemContent)) // عرض نص بدلاً من الرابط في آخر مرة
              ) : (
                <Link href={href}>{t(itemContent)}</Link>
              )}
            </li>
            {pathNames.length !== index + 1 && separator}
          </React.Fragment>
        );
      })}
    </ul>
  );
};

export default NextBreadcrumb;