// /pages/BlogPostPage.jsx
import React, { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import { useParams } from "react-router-dom";
import { blogPosts } from "../data/blogPosts";

export default function BlogPostPage() {
    const { slug } = useParams();
    const [content, setContent] = useState("");
    const post = blogPosts.find(p => p.slug === slug);

    useEffect(() => {
        if (post) {
        import(`../data/BlogPosts/${post.filename}`)
            .then(module => setContent(module.default))
            .catch(err => console.error(err));
        }
    }, [post]);

    if (!post) return <div>Post not found</div>;

    return (
        <div>
        <h1>{post.title}</h1>
        <ReactMarkdown>{content}</ReactMarkdown>
        </div>
    );
}
