import { ReactNode } from 'react';
import { highligthText } from '../../forms/utils/utils';
import { mapTextChilds } from '../utils';

export function TextHighlight({ text, children }: { text?: string, children?: ReactNode }) {
  if (!text) {
    return children;
  }
  const mappedChildren = mapTextChilds(children, (child: string) => {
    const highligthedText = highligthText(child, text);
    return <span dangerouslySetInnerHTML={{ __html: highligthedText }}></span>;
  });
  return mappedChildren;
}