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]);

  const path = (() => {
    const path = props.path;

    if (path.startsWith("public")) {
      return path.slice(6);
    }

    if (!path.startsWith("/")) {
      return `/${path}`;
    }

    return path;
  })();

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