import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { getBlogs } from "@/data/blogs.data";
import type { Product } from "@/data/products.data";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

const relatedBlogSlugs = {
  pureestate: [
    "saas-real-estate-lead-management",
    "real-estate-challenges-without-crm",
    "digital-follow-ups-sales-conversion",
  ],
  buildpro: [
    "builders-crm-erp-one-place",
    "connect-leads-projects-bookings-reports",
    "small-teams-use-saas-early",
  ],
  societypro: [
    "society-maintenance-billing-software",
    "small-teams-use-saas-early",
    "multilingual-software-indian-businesses",
  ],
} as const;

const sectionCopy = {
  en: {
    eyebrow: "Related guides",
    title: "Helpful reading for this workflow",
    read: "Read guide",
  },
  hi: {
    eyebrow: "संबंधित गाइड",
    title: "इस वर्कफ़्लो के लिए उपयोगी लेख",
    read: "गाइड पढ़ें",
  },
  gu: {
    eyebrow: "સંબંધિત ગાઇડ",
    title: "આ વર્કફ્લો માટે ઉપયોગી લેખ",
    read: "ગાઇડ વાંચો",
  },
} as const;

export default function ProductRelatedBlogs({
  locale,
  product,
}: {
  locale: Locale;
  product: Product;
}) {
  const copy = sectionCopy[locale];
  const posts = getBlogs(locale).filter((post) =>
    (relatedBlogSlugs[product.slug] as readonly string[]).includes(post.slug),
  );

  if (posts.length === 0) return null;

  return (
    <section className="mx-auto max-w-[1360px] px-6 py-10 xl:px-8">
      <div className="mb-5">
        <p className="text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#7a86a1]">
          {copy.eyebrow}
        </p>
        <h2 className="mt-2 text-2xl font-extrabold tracking-[-0.045em] text-[#172142]">
          {copy.title}
        </h2>
      </div>
      <div className="grid gap-4 md:grid-cols-3">
        {posts.map((post) => (
          <Link
            key={post.slug}
            href={localizedPath(locale, `/blogs/${post.slug}`)}
            className="group rounded-2xl border border-[#e4e8f4] bg-white p-5 shadow-[0_10px_24px_rgba(51,66,116,0.05)] transition hover:-translate-y-0.5 hover:border-[#cfd5ff]"
          >
            <p className="text-[11px] font-bold text-[#7a86a1]">{post.category}</p>
            <h3 className="mt-2 text-[15px] font-extrabold leading-6 text-[#202b4c]">
              {post.title}
            </h3>
            <span className="mt-4 inline-flex items-center gap-2 text-[12px] font-extrabold text-[#5865e8]">
              {copy.read}
              <ArrowRight size={14} className="transition group-hover:translate-x-0.5" />
            </span>
          </Link>
        ))}
      </div>
    </section>
  );
}