import { getPost } from "@/lib/posts";
import { notFound } from "next/navigation";
import Markdown from 'react-markdown';
import Navbar from "@/components/navbar";
import RecordBox from "@/components/recordbox";

interface PostPageProps {
  params: Promise<{ slug: string }>
}

export default async function PostPage({ params }: PostPageProps) {
  const { slug } = await params
  const post = await getPost(slug)

  if (!post) {
    notFound()
  }

  return (
    <div className="min-h-screen bg-black text-white font-mono">
      <Navbar />
      <RecordBox />

      <title>{post.title}</title>
      <div className="container mx-auto px-4 py-20">
        <div className="max-w-4xl mx-auto">
          
          {/* Post content */}
          <article className="prose prose-invert prose-red max-w-none">
            <div className="text-gray-300 leading-relaxed space-y-6">
              <Markdown components={{
                h2(props) {
                  return <div className="justify-self-center font-bold text-4xl leading-8 mb-2 mt-12">{props.children}</div>
                },
                h3(props) {
                  return <div className="justify-self-center font-medium italic text-2xl leading-8 mb-12">
                    <div>{props.children}</div>
                    <div className="justify-self-center"><a
                      href={"/pdfs/"+post.slug+".pdf"}
                      target="_blank"
                      className="text-lg not-italic font-normal leading-8 text-red-400 hover:text-red-300 transition-colors mb-12"
                    >
                      View as PDF
                    </a></div>
                  </div>
                },
                blockquote(props) {
                  return <div className="italic ml-12 mb-2 mt-2">{props.children}</div>
                },
                p(props) {
                  return <div className="mt-0 mb-0 text-4 leading-8">{props.children}</div>
                },
                a(props) {
                  return <a target="_blank" className="underline underline-offset-8 decoration-red-400 hover:decoration-red-300 hover:text-red-300 transition-colors" href={props.href}>{props.children}</a>
                },
              }}>{post.content}</Markdown>
            </div>
          </article>
        </div>
      </div>
    </div>
  )
}