import { getPost } from "@/lib/posts"
import { notFound } from "next/navigation"
import Link from "next/link"
import Markdown from 'react-markdown'
import { ArrowLeft } from "lucide-react"
import Navbar from "@/components/navbar";
import Image from "next/image";
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">
          {/* Back button */}
          {/*<Link*/}
          {/*  href="/"*/}
          {/*  className="inline-flex items-center space-x-2 text-red-400 hover:text-red-300 transition-colors mb-8"*/}
          {/*>*/}
          {/*  <ArrowLeft className="w-4 h-4" />*/}
          {/*  <span>Back to Home</span>*/}
          {/*</Link>*/}
          
          {/* 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">{props.children}</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>
                }
              }}>{post.content}</Markdown>
            </div>
          </article>
        </div>
      </div>
    </div>
  )
}
