import readRawText from "@/lib/getRawText";
import { useEffect, useState } from "preact/hooks";

type RenderHtmlProps = {
  path: string;
};

export default function RenderFile(props: RenderHtmlProps) {
  const [htmlContent, setHtmlContent] = useState<string>(
    readRawText(props.path),
  );

  useEffect(() => {
    const text = readRawText(props.path);
    setHtmlContent(text);
  }, [props.path]);

  return (
    <div
      style={{
        border: "1px solid #ccc",
        borderRadius: "8px",
        padding: "16px",
        marginBottom: "var(--base-size-16, 1rem)",
      }}
    >
      <iframe
        srcDoc={htmlContent}
        style={{
          border: "1px solid #ccc",
          width: "100%",
        }}
      />
    </div>
  );
}