import { DetailedHTMLProps, HTMLAttributes } from "react";
import HtmlToReact from "html-to-react";
import { twMerge } from "tailwind-merge";

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

/**
 * # HTML String to React Component
 * @className_wrapper twui-html-react
 */
export default function HtmlToReactComponent({
    html,
    componentRef,
    ...props
}: TWUI_TOGGLE_PROPS) {
    const htmlToReactParser = HtmlToReact.Parser();
    const reactElement = htmlToReactParser.parse(html);

    return (
        <div
            {...props}
            className={twMerge("", props.className)}
            ref={componentRef}
        >
            {reactElement}
        </div>
    );
}