import BlogCard from "@/components/blogs/BlogCard";
import type { BlogPageCopy, BlogPost } from "@/data/blogs.data";
import type { Locale } from "@/lib/locales";

export default function RelatedBlogs({ copy, locale, posts }: { copy: BlogPageCopy; locale: Locale; posts: BlogPost[] }) {
  return (
    <section className="bg-[#f9faff] py-14">
      <div className="mx-auto max-w-[1200px] px-6">
        <h2 className="text-3xl font-extrabold tracking-[-0.05em] text-[#172142]">{copy.relatedTitle}</h2>
        <div className="mt-6 grid gap-5 md:grid-cols-3">{posts.map((post) => <BlogCard key={post.slug} locale={locale} post={post} readMore={copy.readMore} />)}</div>
      </div>
    </section>
  );
}