import { useParams } from "react-router-dom";
import { Helmet } from "react-helmet";
import blogs from "../data/blogs";

function BlogDetail() {
  const { slug } = useParams();
  const blog = blogs.find((b) => b.slug === slug);

  if (!blog) return <h2>Blog not found</h2>;

  return (
    <div className="p-6">
      <Helmet>
        <title>{blog.title}</title>
        <meta name="description" content={blog.description} />
      </Helmet>

      <h1>{blog.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: blog.content }} />
    </div>
  );
}

export default BlogDetail;
