import { IconArrowRight } from "@tabler/icons-react";
import { Link } from "@/i18n/navigation";

interface RelatedArticle {
  category: string;
  descriptionEn: string;
  descriptionFr: string;
  slug: string;
  titleEn: string;
  titleFr: string;
}

interface RelatedBlogPostsProps {
  articles: RelatedArticle[];
  locale: string;
}

const sectionTitle: Record<string, string> = {
  fr: "Ressources",
  en: "Resources",
};

const readMoreLabel: Record<string, string> = {
  fr: "Lire la suite",
  en: "Read more",
};

export function RelatedBlogPosts({ articles, locale }: RelatedBlogPostsProps) {
  const displayed = articles.slice(0, 3);
  const title = sectionTitle[locale] || sectionTitle.en;
  const readMore = readMoreLabel[locale] || readMoreLabel.en;

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

  return (
    <section className="px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <h2 className="mb-12 text-center font-bold text-3xl text-white sm:text-4xl">
          {title}
        </h2>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          {displayed.map((article) => {
            const articleTitle =
              locale === "fr" ? article.titleFr : article.titleEn;
            const articleDescription =
              locale === "fr" ? article.descriptionFr : article.descriptionEn;

            return (
              <article
                className="group flex flex-col rounded-2xl border border-white/10 transition-all duration-300 hover:border-[#fd105e]/30 hover:shadow-[#fd105e]/5 hover:shadow-lg"
                key={article.slug}
              >
                <div className="flex flex-1 flex-col gap-4 p-6">
                  <Link
                    className="block"
                    href={`/blog/${article.category}/${article.slug}`}
                  >
                    <h3 className="font-bold text-white text-xl leading-tight transition-colors duration-200 group-hover:text-[#fd105e]">
                      {articleTitle}
                    </h3>
                  </Link>

                  <p className="line-clamp-3 text-neutral-300 text-sm leading-relaxed">
                    {articleDescription}
                  </p>

                  <Link
                    className="mt-auto inline-flex items-center gap-1.5 font-medium text-[#fd105e] text-sm transition-colors duration-200 hover:text-[#fd105e]/80"
                    href={`/blog/${article.category}/${article.slug}`}
                  >
                    {readMore}
                    <IconArrowRight
                      className="transition-transform duration-200 group-hover:translate-x-1"
                      size={16}
                      stroke={2}
                    />
                  </Link>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}