import type { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

export type TWUI_TOGGLE_PROPS = Omit<
    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
    "dangerouslySetInnerHTML"
> & {
    html: string;
    componentRef?: React.RefObject<any>;
};

/**
 * # HTML String to React Component
 * Renders the HTML as-is, so only pass trusted or already-escaped HTML.
 * Uses `dangerouslySetInnerHTML` rather than an HTML-to-React parser so
 * it works in both server and browser bundles.
 * @className_wrapper twui-html-react
 */
export default function HtmlToReactComponent({
    html,
    componentRef,
    ...props
}: TWUI_TOGGLE_PROPS) {
    return (
        <div
            {...props}
            className={twMerge("twui-html-react", props.className)}
            ref={componentRef}
            dangerouslySetInnerHTML={{ __html: html }}
        />
    );
}