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

export default function Breadcrumb({ items }: { items: Crumb[] }) {
  if (!items || items.length === 0) return null;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "'Space Mono',monospace", fontSize: 12, color: "#63686d" }}>
      {items.map((crumb, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          {i > 0 && <span>/</span>}
          {crumb.href ? (
            <a href={crumb.href} style={{ color: "#006568" }}>{crumb.label}</a>
          ) : (
            <span>{crumb.label}</span>
          )}
        </span>
      ))}
    </div>
  );
}