import Image from "next/image";

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav className="flex items-center gap-[3px] h-5">
      {items.map((item, index) => (
        <div key={index} className="flex items-center gap-[3px]">
          <span
            className={`text-sm font-medium leading-[150%] ${
              index === items.length - 1
                ? "text-text-primary font-bold"
                : "text-text-tertiary"
            }`}
          >
            {item.label}
          </span>
          {index < items.length - 1 && (
            <Image
              src="/icon-chevron-right.svg"
              alt="›"
              width={14}
              height={14}
              className="flex-shrink-0"
            />
          )}
        </div>
      ))}
    </nav>
  );
}