// resources\assets\ts\ContactsPage\utils\highlight.tsx

import React from 'react';

export function highlightText(text: string | number | null | undefined, searchTerm: string): React.ReactNode {
  // Handle null/undefined
  if (text === null || text === undefined) return null;
  
  const term = searchTerm.trim();
  const textStr = text.toString();
  
  if (!term) return textStr;

  // Escape special regex characters
  const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escapedTerm})`, 'gi');
  const parts = textStr.split(regex);

  return (
    <span>
      {parts.map((part, i) => {
        if (!part) return null; // Skip empty strings
        
        const isMatch = part.toLowerCase() === term.toLowerCase();
        
        return isMatch ? (
          <mark key={i} style={{ background: 'yellow', padding: 0 }}>
            {part}
          </mark>
        ) : (
          <span key={i}>{part}</span>
        );
      })}
    </span>
  );
}