import { fetchBlogPosts } from "@/lib/blog-api";
import BlogPostCard from "./blog-post-card";

interface RelatedPostsProps {
  currentPostId: number;
  category: string;
}

export default async function RelatedPosts({
  currentPostId,
  category,
}: RelatedPostsProps) {
  const allPosts = await fetchBlogPosts();

  const relatedPosts = allPosts
    .filter((post) => post.category === category && post.id !== currentPostId)
    .slice(0, 3);

  if (relatedPosts.length === 0) {
    return null;
  }

  return (
    <section className="py-16">
      <div className="container max-w-7xl mx-auto">
        <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
          Related Articles
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {relatedPosts.map((post) => (
            <BlogPostCard key={post.id} post={post} variant="compact" />
          ))}
        </div>
      </div>
    </section>
  );
}