// components/Breadcrumb.tsx
import Link from "next/link";
import React from "react";

// Menü öğeleri için bir tip tanımlıyoruz
export type BreadcrumbItem = {
  label: string; // Görüntülenecek metin
  href: string;  // Link
  isCurrent?: boolean; // Şu anki sayfa mı?
};

// Props tipi
export type BreadcrumbProps = {
  items: BreadcrumbItem[]; // Menü öğelerinin dizisi
};

const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
  return (
       <div className='bg-black'>
        <div className='container'>
    <nav aria-label="Sayfa yolu" className="overflow-hidden">
      <ol className="breadcrumb flex items-center gap-2 overflow-x-auto py-4 text-white [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {items.map((item, index) => (
          <React.Fragment key={`${item.label}-${index}`}>
          {index > 0 && <li className="shrink-0 text-white/35" aria-hidden="true">/</li>}
          <li
            className={`breadcrumb-item shrink-0 whitespace-nowrap ${
              item.isCurrent ? "breadcrumb-item-current" : ""
              
            } ${index == 0 ? 'font-semibold text-base sm:text-lg' : 'text-xs font-normal text-white/80 sm:text-sm'} `}
            aria-current={item.isCurrent ? "page" : undefined}
          >
            {item.isCurrent ? (
              <span>{item.label} </span>
            ) : (
              <Link href={item.href}>{item.label}</Link>
            )}
          </li>
          </React.Fragment>
        ))}
      </ol>
     
    </nav>
    </div>
    </div>
  );
};

export default Breadcrumb;