import { IconArrowRight } from "@tabler/icons-react";
import { allBlogPosts } from "content-collections";
import BlogCard from "@/components/blog/blog-card";
import { Link } from "@/i18n/navigation";

interface LatestBlogPostsProps {
  locale: string;
}

const sectionLabels: Record<string, { title: string; viewAll: string }> = {
  fr: { title: "Derniers articles", viewAll: "Voir le blog" },
  en: { title: "Latest articles", viewAll: "View all articles" },
};

export default function LatestBlogPosts({ locale }: LatestBlogPostsProps) {
  const labels = sectionLabels[locale] || sectionLabels.en;

  const latestPosts = allBlogPosts
    .filter((post) => post.locale === locale && post.published)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    .slice(0, 3);

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

  return (
    <section className="py-16 sm:py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-12 flex items-end justify-between">
          <h2 className="font-bold text-3xl text-white tracking-tight sm:text-4xl">
            {labels.title}
          </h2>
          <Link
            className="hidden items-center gap-1.5 font-medium text-[#fd105e] text-sm transition-colors duration-200 hover:text-[#fd105e]/80 sm:inline-flex"
            href="/blog"
          >
            {labels.viewAll}
            <IconArrowRight size={16} stroke={2} />
          </Link>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          {latestPosts.map((post) => (
            <BlogCard
              category={post.category}
              categorySlug={post.categorySlug}
              date={post.date}
              description={post.description}
              headingLevel="h3"
              image={post.image}
              key={post.slug}
              locale={locale}
              slug={post.slug}
              title={post.title}
            />
          ))}
        </div>

        <div className="mt-8 flex justify-center sm:hidden">
          <Link
            className="inline-flex items-center gap-1.5 font-medium text-[#fd105e] text-sm transition-colors duration-200 hover:text-[#fd105e]/80"
            href="/blog"
          >
            {labels.viewAll}
            <IconArrowRight size={16} stroke={2} />
          </Link>
        </div>
      </div>
    </section>
  );
}