import { fetchAllProducts, fetchProductsImage, getImageUrl } from "@/lib/api";
import { Pagination } from "@/components/ui/pagination";
import { Suspense } from "react";
import SearchBar from "@/components/search-bar";
import Banner from "@/components/banner";

import { AllProductCard } from "./_components/all-product-card";

interface PageProps {
  searchParams: { page?: string };
}

export default async function AllProductsPage({ searchParams }: PageProps) {
  const currentPage = Number(searchParams.page) || 1;
  const productsData = await fetchAllProducts(currentPage);

  const resp = await fetchProductsImage();

  return (
    <div className="bg-white">
      <Banner imageSrc={resp.image_url} height={400}>
        <div className="text-center text-white w-[600px]">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">All Products</h1>
          <div className="max-w-4xl mx-auto">
            <SearchBar
              variant="large"
              placeholder="Search by product name, description, or category..."
            />
          </div>
        </div>
      </Banner>

      <section id="products-section" className="py-16 text-black px-4 md:px-8">
        <div className="container max-w-7xl mx-auto">
          <Suspense fallback={<p>Loading products...</p>}>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {productsData.data.map((product) => {
                const imageUrl = getImageUrl(product.image);
                return (
                  <AllProductCard
                    key={product.id}
                    product={product}
                    imageUrl={imageUrl}
                  />
                );
              })}
            </div>

            {productsData.last_page > 1 && (
              <div className="mt-12">
                <Pagination
                  currentPage={productsData.current_page}
                  totalPages={productsData.last_page}
                  onPageChange={() => {}} // This will be handled by the Next.js router
                />
              </div>
            )}
          </Suspense>
        </div>
      </section>
    </div>
  );
}

// Custom card component specifically for the all products page