import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { getPostBySlug } from '@/lib/blog';

interface BlogPostProps {
  params: {
    locale: string;
    slug: string;
  };
}

export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
  const post = await getPostBySlug(slug, locale);

  if (!post) {
    notFound();
  }

  return (
    <article className="container mx-auto px-4 py-12 max-w-4xl">
      <header className="mb-8 text-center">
        <div className="text-text-secondary mb-4">
          {new Date(post.frontmatter.date).toLocaleDateString(locale, {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
          })}
        </div>
        <h1 className="text-4xl md:text-5xl font-bold text-primary mb-6">
          {post.frontmatter.title}
        </h1>
        {post.frontmatter.featuredImage && (
          <div className="aspect-video relative rounded-xl overflow-hidden shadow-lg mb-8">
            <img 
              src={post.frontmatter.featuredImage} 
              alt={post.frontmatter.title}
              className="w-full h-full object-cover"
            />
          </div>
        )}
      </header>

      <div className="prose prose-lg max-w-none">
        <MDXRemote source={post.content} />
      </div>
    </article>
  );
}