import React from 'react';
import { useSelector } from 'react-redux';
import Link from 'next/link';
import { IRootState } from '../../store';
import { useTranslation } from 'next-i18next';



interface BreadcrumbProps {
  breadcrumbs: { title: any; href?: string }[];
}

const Breadcrumb = ({ breadcrumbs }: BreadcrumbProps) => {
    const { t } = useTranslation('common'); 
  const homeTitle = t('home')
  const isRtl = useSelector((state: IRootState) => state.themeConfig.direction) === 'rtl';

  return (
    <section className="  lg:pt-28  lg:mt-2 pt-24  dark:bg-none  ">
      <div className="container">
        <nav aria-label="Breadcrumb">
          <ol className="text-gray-600 flex items-center gap-1 text-lg">
            <li>
              <Link href="/" className="hover:text-gray-700 block transition">
                <span className="sr-only">{homeTitle}</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-4 w-4"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                  />
                </svg>
              </Link>
            </li>

            {breadcrumbs.map((breadcrumb, index) => (
              <React.Fragment key={index}>
                {/* Arrow separator */}
                <li className={isRtl ? 'rotate-180' : ''}>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-4 w-4"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fillRule="evenodd"
                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                </li>

                {/* Breadcrumb link */}
                <li>
                  {breadcrumb.href ? (
                    <Link href={breadcrumb.href} className="hover:text-gray-700 block transition">
                      {breadcrumb.title}
                    </Link>
                  ) : (
                    <span className="text-gray-600">{breadcrumb.title}</span>
                  )}
                </li>
              </React.Fragment>
            ))}
          </ol>
        </nav>
      </div>
    </section>
  );
};

export default Breadcrumb;