import BlogCard from "./BlogCard";

type BlogPost = {
  id: string;
  slug: string;
  title: string;
  excerpt?: string;
  date?: string;
  author?: {
    node?: {
      name?: string;
    };
  };
  categories?: {
    nodes?: {
      name: string;
      slug: string;
    }[];
  };
  featuredImage?: {
    node?: {
      sourceUrl: string;
      altText?: string;
    };
  };
};

type RelatedPostsProps = {
  posts: BlogPost[];
};

export default function RelatedPosts({ posts }: RelatedPostsProps) {
  return (
    <section className="py-20 bg-[#ffffff]">
      <div className="container mx-auto px-4">
        <p className="text-[#202020]/50 text-lg font-medium">
          You may also like these
        </p>
        <h3 className="text-[40px] text-[#202020] font-mono font-medium mb-8">
          Related Post
        </h3>

        <div className="grid md:grid-cols-3 gap-8">
          {posts.map((post) => (
            <BlogCard key={post.id} post={post} />
          ))}
        </div>
      </div>
    </section>
  );
}