import SearchFilters from "./SearchFilters";
import { Suspense } from "react";

interface ProductsPageProps {
  searchParams: Promise<{
    category?: string; // Optional query string: ?category=shoes
    sort?: string; // Optional query string: ?sort=asc
  }>;
}

export default async function ProductsPage({
  searchParams,
}: ProductsPageProps) {
  // Await the searchParams Promise
  const { category = "all", sort = "featured" } = await searchParams;

  return (
    <main className="p-2 m-2 ">
      <h1>Products Catalog</h1>
      <p>
        Server Params Filter Category: <strong>{category}</strong>
      </p>
      <p>
        Server Params Sorting By: <strong>{sort}</strong>
      </p>

      {/* Render the Client Component inside a Suspense boundary */}
      <Suspense fallback={<div>Loading filters...</div>}>
        <SearchFilters />
      </Suspense>
    </main>
  );
}