import {MouseEventHandler} from "react";

interface RawHTMLProps {
    children: string,
    onClick?: MouseEventHandler<HTMLDivElement>
    hide?: boolean,
}

/**
 * @param {children: string} Raw HTML. **IMPORTANT** MUST be sanitized by the caller (PHP).
 */
export const RawHTML = ({children, onClick, hide=false}: RawHTMLProps) => {
    /**
     * Context for attribute below:
     * @see https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html
     * @see https://github.com/reactjs/rfcs/pull/129
     */
    return <div className={hide ? 'd-none' : ''} dangerouslySetInnerHTML={{__html: children}} onClick={onClick}></div>
}
