interface BreadcrumbProps {
  items: { label: string; onClick?: () => void }[];
}

export function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <div class="flex items-center gap-1.5 text-xs mb-4" style={{ color: "var(--z-muted)" }}>
      {items.map((item, i) => (
        <>
          {i > 0 && <span style={{ opacity: 0.3 }}>/</span>}
          {item.onClick ? (
            <a class="cursor-pointer hover:text-[var(--z-accent-light)] transition-colors" onClick={item.onClick}>
              {item.label}
            </a>
          ) : (
            <span style={{ color: "var(--z-text)" }}>{item.label}</span>
          )}
        </>
      ))}
    </div>
  );
}
