"use client"
import axios from "axios"
import Banner from "../components/banner"

import ProductList from "../products/productList"
import Success from "../components/Success"
import Filter from "../components/filter"
import Search from "../components/search"






export default function Product({searchParams}) {
  const {query,category,city,price} = searchParams
 
console.log(query)
  



  return (
    <>
   <div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
   <h2 class="text-xl font-bold text-gray-900 sm:text-3xl">Product Collection</h2>

      <Banner/> 
    <Search/>
      
    
  
   

    <Filter>
      <div class="lg:col-span-3 mt-8">
        <div className="my-5"><Success heading={`Search Results of ${query||""} ${category||""}` } /></div>
        
        <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          
<ProductList params ={searchParams}/>

          

         
        </ul>
        
      </div>
     </Filter> 
    </div>
   
    </>
  )
}
