klz-cables.com/components/RelatedProducts.tsx

'use client';

import { getAllProducts } from '@/lib/mdx';
import { mapFileSlugToTranslated } from '@/lib/slugs';
import { getTranslations } from 'next-intl/server';
import Image from 'next/image';
import Link from 'next/link';
import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events';
import { useEffect, useState } from 'react';

interface RelatedProductsProps {
  currentSlug: string;
  categories: string[];
  locale: string;
}

export default function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
  const { trackEvent } = useAnalytics();
  const [allProducts, setAllProducts] = useState<any[]>([]);
  const [t, setT] = useState<any>(null);

  useEffect(() => {
    async function load() {
      const products = await getAllProducts(locale);
      const translations = await getTranslations('Products');
      setAllProducts(products);
      setT(() => translations);
    }
    load();
  }, [locale]);

  if (!t) return null;

  // Filter products: same category, not current product
  const related = allProducts
    .filter(
      (p) =>
        p.slug !== currentSlug && p.frontmatter.categories.some((cat) => categories.includes(cat)),
    )
    .slice(0, 3); // Limit to 3 for better spacing

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

  return (
    <div className="">
      <div className="flex items-end justify-between mb-12">
        <div>
          <h2 className="text-3xl md:text-4xl font-extrabold text-primary tracking-tight mb-4">
            {t('relatedProductsTitle') || 'Related Products'}
          </h2>
          <div className="h-1.5 w-20 bg-accent rounded-full" />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {related.map((product) => {
          // Find the category slug for the link
          const categorySlugs = [
            'low-voltage-cables',
            'medium-voltage-cables',
            'high-voltage-cables',
            'solar-cables',
          ];
          const catSlug =
            categorySlugs.find((slug) => {
              const key = slug
                .replace(/-cables$/, '')
                .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
              const title = t(`categories.${key}.title`);
              return product.frontmatter.categories.some(
                (cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title,
              );
            }) || 'low-voltage-cables';

          // Note: Since this is now client-side, we can't easily use mapFileSlugToTranslated
          // if it's a server-only lib. Let's assume for now the slugs are compatible or
          // we'll need to pass translated slugs from parent if needed.
          // For now, let's just use the product slug as is, or if we want to be safe,
          // we should have kept this a server component and used a client wrapper for the link.

          return (
            <Link
              key={product.slug}
              href={`/${locale}/products/${catSlug}/${product.slug}`}
              className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
              onClick={() =>
                trackEvent(AnalyticsEvents.PRODUCT_VIEW, {
                  product_id: product.slug,
                  product_name: product.frontmatter.title,
                  location: 'related_products',
                })
              }
            >
              <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">
                {product.frontmatter.images?.[0] ? (
                  <>
                    <Image
                      src={product.frontmatter.images[0]}
                      alt={product.frontmatter.title}
                      fill
                      className="object-contain p-4 transition-transform duration-700 group-hover:scale-110 z-10"
                    />
                    <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-2/3 h-3 bg-black/5 blur-lg rounded-full" />
                  </>
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-text-secondary/30 font-bold uppercase tracking-widest text-xs">
                    No Image
                  </div>
                )}
              </div>
              <div className="p-8">
                <div className="flex flex-wrap gap-2 mb-3">
                  {product.frontmatter.categories.slice(0, 1).map((cat: any, idx: number) => (
                    <span
                      key={idx}
                      className="text-[10px] font-bold uppercase tracking-widest text-primary/40"
                    >
                      {cat}
                    </span>
                  ))}
                </div>
                <h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors leading-tight">
                  {product.frontmatter.title}
                </h3>
                <div className="mt-6 flex items-center text-primary text-sm font-bold group-hover:text-accent-dark transition-colors">
                  <span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-0.5">
                    {t('details')}
                  </span>
                  <svg
                    className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M17 8l4 4m0 0l-4 4m4-4H3"
                    />
                  </svg>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}