"use client"

import { useEffect, useRef } from "react";

export function HTMLRenderer({ content }: {
    content: string
}) {
    const iframeRef = useRef<HTMLIFrameElement>(null);

    useEffect(() => {
        if (!iframeRef.current || !content) return;

        const iframe = iframeRef.current;
        const iframeDoc = iframe.contentDocument

        if (iframeDoc) {
            // Write directly to iframe - scripts will execute!
            iframeDoc.open();
            iframeDoc.write(content);
            iframeDoc.close();

            // // Adjust height after content loads
            // const adjustHeight = () => {
            //     iframe.style.height = iframeDoc.body.scrollHeight + 'px';
            // };

            // iframeDoc.addEventListener('load', adjustHeight);
            // return () => iframeDoc.removeEventListener('load', adjustHeight);
        }

    }, [content]);

    return (
        <iframe
            ref={iframeRef}
            sandbox="allow-scripts allow-cross-origin allow-same-origin allow-forms allow-popups"
        />
    );
}
