import Image from "next/image";
import {notFound} from "next/navigation";
import {getBlogBySlug, getAllBlogs} from "@/lib/api/api-blog";
import markdownToHtml from "@/lib/utils/markdownToHtml";
import markdownStyles from "@/components/markdown-styles.module.css";

export default async function BlogPostPage({params}) {
  const blog = getBlogBySlug(params.slug);
  if (!blog) {
    return notFound();
  }

  // Convert markdown content to HTML
  const content = await markdownToHtml(blog.content);

  return (
    <article className="max-w-3xl mx-auto py-10 px-4 ">
      <header className="mb-8 border-b pb-4">
        <Image src={blog.coverImage} alt={blog.author.name} width={1000} height={563} className="rounded-xl object-cover aspect-video mb-6" />
        <h1 className="text-4xl font-bold mb-4">{blog.title}</h1>
        <div className="flex items-center space-x-4">
          {/* Author Image */}
          <Image src={blog.author.picture} alt={blog.author.name} width={40} height={40} className="rounded-full" />
          <div>
            {/* Author Name */}
            <p className="text-gray-800 font-medium">{blog.author.name}</p>
            {/* Date */}
            <p className="text-gray-500 text-sm">{new Date(blog.date).toLocaleDateString()}</p>
          </div>
        </div>
      </header>
      <section className={`prose max-w-none ${markdownStyles["markdown"]}`} dangerouslySetInnerHTML={{__html: content}} />
    </article>
  );
}

// Optional: Generate static paths for each blog post
export async function generateStaticParams() {
  const blogs = getAllBlogs();
  return blogs.map((blog) => ({
    slug: blog.slug,
  }));
}
