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",
			}}
		>
			<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
		</div>
	);
}