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

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;