import { useCallback } from "react";

const HighlightedContent: React.FC<{ html: string; highlightPhrases: string[] }> = ({ html, highlightPhrases }) => {

    const createHighlightedContent = useCallback(() => {
        if (highlightPhrases.length === 0) {
            return { __html: html };
        }

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

        const regex = new RegExp(`(${highlightPhrases.map(escapeRegExp).join('|')})`, 'gi');
        const highlightedHtml = html.replace(regex, (match) => `<span style="background-color: yellow;">${match}</span>`);

        return { __html: highlightedHtml };
    }, [html, highlightPhrases]);

    return <div dangerouslySetInnerHTML={createHighlightedContent()} />;
};

export default HighlightedContent;