import React from 'react';
import styles from './HighlightText.module.scss';

interface HighlightTextProps {
  text: string;
  keyword: string;
}

function escapeRegExp(s: string): string {
  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

export function HighlightText({ text, keyword }: HighlightTextProps) {
  if (!text) {
    return null;
  }
  const trimmed = keyword?.trim();
  if (!trimmed) {
    return <>{text}</>;
  }
  try {
    const regex = new RegExp(`(${escapeRegExp(trimmed)})`, 'gi');
    const parts = text.split(regex);
    if (parts.length === 1) {
      return <>{text}</>;
    }
    return (
      <>
        {parts.map((part, i) => (
          part.toLowerCase() === trimmed.toLowerCase()
            ? <mark key={i} className={styles.highlight}>{part}</mark>
            : part
        ))}
      </>
    );
  } catch {
    return <>{text}</>;
  }
}

export default HighlightText;