confessions-of-grace/app/posts/[id]/page.tsx

import ShareButtons from '@/components/ShareButtons';
import { getPostData, getSortedPostsData } from '@/lib/markdown';
import { PostData, PostMetadata } from '@/types';
import { format } from 'date-fns';
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import CommentSection from "@/components/CommentSection";
import { generateMetadata as createMetadata } from '@/components/Metadata';
import type { Metadata } from 'next';

interface PageProps {
    params: Promise<{ id: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
    const { id } = await params;
    const post = await getPostData(id);
    const postUrl = `https://confessionsofgrace.com/posts/${post.id}`;

    return createMetadata({
        title: post.title,
        description: post.excerpt,
        keywords: post.tags.join(', '),
        image: post.coverImage,
        url: postUrl,
        type: 'article'
    });
}

async function getPostAndMorePosts(id: string): Promise<{ post: PostData; morePosts: PostMetadata[] }> {
    const post = await getPostData(id);
    const allPosts = getSortedPostsData();

    // Filter out the current post and get a few related posts (by tags)
    const otherPosts = allPosts.filter(p => p.id !== post.id);

    // Find posts with matching tags
    const relatedPosts = otherPosts
        .filter(p => p.tags.some(tag => post.tags.includes(tag)))
        .slice(0, 2);

    // If we don't have enough related posts, add recent posts
    const morePosts = relatedPosts.length < 2
        ? [...relatedPosts, ...otherPosts.filter(p => !relatedPosts.includes(p))].slice(0, 2)
        : relatedPosts;

    return { post, morePosts };
}

export default async function PostPage({ params }: PageProps) {
    const { id } = await params;
    const { post, morePosts } = await getPostAndMorePosts(id);
    const postUrl = `https://confessionsofgrace.com/posts/${post.id}`;

    return (
        <article className="max-w-3xl mx-auto">
            <header className="mb-8">
                <h1 className="text-3xl md:text-4xl font-bold mb-2">{post.title}</h1>
                <div className="flex items-center text-primary-500 mb-6">
                    <span>{post.author}</span>
                    <span className="mx-2">•</span>
                    <time dateTime={post.date}>
                        {format(new Date(post.date), 'MMMM d, yyyy')}
                    </time>
                </div>
                {post.coverImage && (
                    <div className="relative h-64 md:h-96 w-full mb-8 rounded-lg overflow-hidden">
                        <Image
                            src={post.coverImage}
                            alt={post.title}
                            fill
                            className="object-cover"
                            priority
                        />
                    </div>
                )}
                <div className="flex flex-wrap gap-2 mb-6">
                    {post.tags.map(tag => (
                        <Link
                            key={tag}
                            href={`/tags/${tag}`}
                            className="text-sm bg-primary-100 text-primary-600 px-3 py-1 rounded-md hover:bg-primary-200"
                        >
                            {tag}
                        </Link>
                    ))}
                </div>
            </header>

            <div
                className="blog-post prose prose-lg max-w-none"
                dangerouslySetInnerHTML={{ __html: post.content }}
            />

            <div className="mt-8 pt-6 border-t border-primary-200">
                <ShareButtons
                    url={postUrl}
                    title={post.title}
                    description={post.excerpt}
                />
            </div>

            <div className="mt-12 pt-6 border-t border-primary-200">
                <h2 className="text-2xl font-bold mb-6">More Posts</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {morePosts.slice(0, 2).map(post => (
                        <div key={post.id} className="bg-white p-6 rounded-md border border-primary-200 shadow-sm">
                            <h3 className="font-bold mb-2">
                                <Link href={`/posts/${post.id}`} className="hover:text-accent-dark">
                                    {post.title}
                                </Link>
                            </h3>
                            <p className="text-primary-600 text-sm mb-2">
                                {format(new Date(post.date), 'MMMM d, yyyy')}
                            </p>
                            <p className="text-primary-700">{post.excerpt}</p>
                        </div>
                    ))}
                </div>
            </div>

            <CommentSection postId={post.id} />

            <div className="mt-12 pt-6 border-t border-primary-200">
                <Link href="/public" className="text-accent-dark hover:text-accent inline-flex items-center">
                    <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to all posts
                </Link>
            </div>
        </article>
    );
}