'use client'

import * as motion from 'framer-motion/m'
import ProductCard from '@/components/frontend/ProductCard'
import type { RelatedProduct } from '@/lib/db/queries/getProductDetail'

interface RelatedProductsProps {
  products: RelatedProduct[]
  title: string
}

export default function RelatedProducts({ products, title }: RelatedProductsProps) {
  if (products.length === 0) return null

  return (
    <div className="mt-16">
      <h2 className="text-2xl font-bold text-dark mb-6">{title}</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {products.map((product, index) => (
          <motion.div
            key={product.id}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.1 }}
          >
            <ProductCard
              id={product.id}
              title={product.title}
              price={product.price}
              oldPrice={product.oldPrice}
              image={product.imageUrl ?? '📦'}
              slug={product.slug}
              productType={product.type}
            />
          </motion.div>
        ))}
      </div>
    </div>
  )
}