// Text with the words that differ from the other translation marked.
export function DiffText({ text, ranges = [] }) {
  if (!ranges.length) return text;
  const parts = [];
  let cursor = 0;
  ranges.forEach((r, i) => {
    if (r.start > cursor) parts.push(text.slice(cursor, r.start));
    parts.push(<span key={i} className="diff-hl">{text.slice(r.start, r.end)}</span>);
    cursor = r.end;
  });
  if (cursor < text.length) parts.push(text.slice(cursor));
  return <>{parts}</>;
}