// Refs — small shared component that renders a task's references list.
// URLs become anchors; textbook citations render as plain mono text.
// Designed to read as metadata: mono, low-contrast, no buttons or icons.

function Refs({ refs, max, label }) {
  if (!refs || refs.length === 0) return null;
  const list = max ? refs.slice(0, max) : refs;
  const overflow = max && refs.length > max ? refs.length - max : 0;
  return (
    <div className="refs">
      {label && <span className="refs__lead">{label}</span>}
      {list.map((r, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="refs__sep" aria-hidden="true">·</span>}
          {r.url ? (
            <a
              href={r.url}
              target="_blank"
              rel="noopener noreferrer"
              className="refs__a"
              onClick={(e) => e.stopPropagation()}
            >
              {r.label}
            </a>
          ) : (
            <span className="refs__text">{r.label}</span>
          )}
        </React.Fragment>
      ))}
      {overflow > 0 && (
        <React.Fragment>
          <span className="refs__sep" aria-hidden="true">·</span>
          <span className="refs__overflow">+{overflow} more</span>
        </React.Fragment>
      )}
    </div>
  );
}

window.Refs = Refs;