import { ArrowLeft2 } from "iconsax-reactjs";
import Link from "next/link";
import { type FC, Fragment } from "react";
import { BREADCRUMB_ITEMS } from "../constants";

const ProductBreadcrumb: FC = () => {
  return (
    <nav aria-label="مسیر صفحه" className="flex items-center justify-start gap-2 bg-secondary px-4 py-3 text-sm text-[#3F4D5A] sm:px-8 lg:px-30">
      {BREADCRUMB_ITEMS.map((item, index) => (
        <Fragment key={item.label}>
          {index > 0 && <ArrowLeft2 size={14} color="currentColor" className="shrink-0" />}
          {"href" in item ? (
            <Link href={item.href} className="transition-colors hover:text-primary">
              {item.label}
            </Link>
          ) : (
            <span className="font-bold text-[#0F2438]">{item.label}</span>
          )}
        </Fragment>
      ))}
    </nav>
  );
};

export default ProductBreadcrumb;