import { useEffect } from 'react';
import twemoji from 'twemoji';

/**
 * Custom hook to parse and replace emojis with Twemoji images
 * @param dependencies - Array of dependencies that should trigger re-parsing
 */
export const useTwemoji = (dependencies: any[] = []) => {
    useEffect(() => {
        // Parse the entire document body for emojis
        twemoji.parse(document.body, {
            folder: 'svg',
            ext: '.svg',
            base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/'
        });
    }, dependencies);
};

/**
 * Parse a specific element for emojis
 * @param element - The DOM element to parse
 */
export const parseTwemoji = (element: HTMLElement | null) => {
    if (element) {
        twemoji.parse(element, {
            folder: 'svg',
            ext: '.svg',
            base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/'
        });
    }
};

export default useTwemoji;
