'use client'

import * as motion from 'framer-motion/m'
import Link from 'next/link'
import ProductCard from '@/components/frontend/ProductCard'

export interface ProductItem {
  id: number
  title: string
  price: number
  oldPrice?: number
  rating: number
  reviews: number
  image: string
  slug: string
  discount?: number
}

interface ProductGridProps {
  products: ProductItem[]
  columns?: {
    mobile?: number
    tablet?: number
    desktop?: number
  }
  onAddToCart?: (productId: number, e: React.MouseEvent) => void
  emptyMessage?: string
}

export default function ProductGrid({
  products,
  columns = { mobile: 1, tablet: 2, desktop: 3 },
  onAddToCart,
  emptyMessage = 'No products found'
}: ProductGridProps) {
  if (products.length === 0) {
    return (
      <div className="text-center py-16">
        <div className="text-6xl mb-4">🛒</div>
        <h3 className="text-xl font-semibold text-dark mb-2">{emptyMessage}</h3>
        <p className="text-gray-custom">Try adjusting your filters or search criteria</p>
      </div>
    )
  }

  const gridCols = {
    1: 'grid-cols-1',
    2: 'grid-cols-1 sm:grid-cols-2',
    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
  }

  const colsClass = gridCols[columns.desktop as keyof typeof gridCols] || gridCols[3]

  return (
    <div className={`grid ${colsClass} 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.05 }}
        >
          <Link href={`/product/${product.slug}`}>
            <ProductCard
              id={String(product.id)}
              title={product.title}
              price={product.price}
              oldPrice={product.oldPrice}
              rating={product.rating}
              reviews={product.reviews}
              image={product.image}
              discount={product.discount}
              onAddToCart={(e) => onAddToCart?.(product.id, e)}
            />
          </Link>
        </motion.div>
      ))}
    </div>
  )
}