"use client"

import { useSearchParams } from 'next/navigation'
import { ProductCard } from "./product-card"
import { Product } from "@/types/product"

interface ProductGridProps {
  products: Product[]
}

export function ProductGrid({ products }: ProductGridProps) {
  const searchParams = useSearchParams()

  const minPrice = searchParams.get('minPrice')
  const maxPrice = searchParams.get('maxPrice')
  const categories = searchParams.get('categories')

  const filteredProducts = products.filter(product => {
    const priceInRange = (!minPrice || product.price >= parseInt(minPrice)) &&
                         (!maxPrice || product.price <= parseInt(maxPrice))
    
    const categoryMatch = !categories || categories.split(',').includes(product.category)

    return priceInRange && categoryMatch
  })

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
      {filteredProducts.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}