import MarkdownRenderer from "@/components/MarkdownRenderer";

import { promises as fs } from "fs";

export default async function BlogPage() {
  try {
    // Read markdown file from project root
    const filePath = "src/app/blog/docker_primer/content.md";
    const markdownContent = await fs.readFile(filePath, "utf8");

    return (
      <main className="flex flex-1 flex-col justify-end items-center font-[family-name:var(--font-inter-sans)] pt-10 md:pt-20 pb-25 md:pb-0">
        <div className="md:w-[786px] w-[95%]">
          <div className="p-5 pt-10 rounded-lg markdown">
            <MarkdownRenderer markdown={markdownContent} />
          </div>
        </div>
      </main>
    );
  } catch (error) {
    console.error("Error loading markdown:", error);
    return <div>Failed to load content</div>;
  }
}