import { getAllProducts } from '@/lib/mdx';
import { getTranslations } from 'next-intl/server';
import Image from 'next/image';
import Link from 'next/link';

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

export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
  const allProducts = await getAllProducts(locale);
  const t = await getTranslations('Products');
  
  // 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 catSlug = product.frontmatter.categories[0].toLowerCase().replace(/\s+/g, '-');
          
          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"
            >
              <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, idx) => (
                    <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>
  );
}