import Link from "next/link";
import { ChevronRight } from "lucide-react";

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

export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav className="flex items-center gap-1.5 text-xs text-text-secondary mb-4">
      {items.map((item, i) => (
        <span key={i} className="flex items-center gap-1.5">
          {i > 0 && <ChevronRight size={12} className="text-text-muted" />}
          {item.href && i < items.length - 1 ? (
            <Link href={item.href} className="hover:text-text-primary hover:underline transition-colors">
              {item.label}
            </Link>
          ) : (
            <span className={i === items.length - 1 ? "text-text-primary" : ""}>{item.label}</span>
          )}
        </span>
      ))}
    </nav>
  );
}