import React from 'react';
import { Typography } from 'antd';

import { highlightSearchContentByTerms } from '../../../../util';
import { AppContext } from '../../../../App';

const FC = ({ value = '', terms = [], publishedValue = '' }) => {
  return (
    <AppContext.Consumer>
    {
      appValue => <a onClick={() => {
        appValue?.setGlobalState && appValue?.setGlobalState({
          message: 'data-govern-show-index-detail-message',
          data: { name: value } 
        })
      }}>
        <Typography.Text>{highlightSearchContentByTerms(value, terms)}</Typography.Text>
        {
          publishedValue && (publishedValue !== value) && <Typography.Text className='ml-2' type='danger'><del>{publishedValue}</del></Typography.Text>
        }
      </a>
    }
    </AppContext.Consumer>
  );
}

export default FC;