// src/components/Changelog.jsx

import { marked } from "marked";
import changelog from "../../../../CHANGELOG.md?raw"; // assuming changelog.md is in root ?raw

const Changelog = () => {
	const html: any = marked.parse(changelog);
	const recentChanges = html.split("<h2>")[1];
	// const [htmlContent, setHtmlContent] = useState("");

	// useEffect(() => {
	//     fetch("/changelog.md")
	//         .then((res) => res.text())
	//         .then((md) => {
	//             const versionBlocks = md.split(/^##\s+/gm); // Split on headings
	//             if (versionBlocks.length > 1) {
	//                 const latestBlock = `## ${versionBlocks[1]}`;
	//                 const html: any = marked.parse(latestBlock, {
	//                     breaks: true,
	//                     gfm: true,
	//                 });
	//                 setHtmlContent(html);
	//             }
	//         });
	// }, []);
	return (
		<div
			className="prose m-3"
			dangerouslySetInnerHTML={{ __html: `<h2>${recentChanges}` }}
		/>
	);
};

export default Changelog;
