import React from 'react';
import { replace, escapeRegExp } from 'lodash';
import './index.less';

function HighLevel({ keyword, name }) {
  if (!keyword) {
    return <span>{name}</span>;
  }
  let reg = new RegExp(escapeRegExp(keyword), 'g');
  let html = replace(name, reg, `<span class="high-level">${keyword}</span>`);
  return <span dangerouslySetInnerHTML={{ __html: html }} />;
}

export default React.memo(HighLevel);
