import React from "react";
import { ProductRecommendationCarouselCard } from "@/components/showcase/ProductRecommendationCarouselCard";
import { searchProducts } from "@/lib/product-actions";
import { logger } from "@/lib/logger";

/**
 * ⚡ Optimization: Server-Side Rendering (SSR) for Search Results
 * Logic extracted to a separate component to avoid Next.js Page export restrictions.
 */
export async function SearchResults({
  query,
}: {
  query: string;
}) {
  let products: any[] = [];
  try {
    const response = await searchProducts({ 
      page: 1, 
      pageSize: 50, 
      query, 
      requestType: "display",
      sortOrder: "ASC"
    });
    
    if (response.success) {
      products = response.data.documents;
    }
  } catch (error) {
    logger.error({ error }, "Error searching products:");
  }

  return (
    <div className="flex-1">
      <h1 className="text-2xl font-bold mb-6">
        {query ? `Suchergebnisse für "${query}"` : "Alle Produkte"}
      </h1>

      {products.length > 0 ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {products.map((product) => (
            <ProductRecommendationCarouselCard
              key={product.id}
              ImageLink={product.image}
              ProductName={product.title}
              ProductId={product.id}
              ProductPrice={product.price}
            />
          ))}
        </div>
      ) : (
        <div className="text-center py-20 bg-muted/50 rounded-lg border-2 border-dashed">
          <p className="text-muted-foreground">Keine Produkte gefunden.</p>
        </div>
      )}
    </div>
  );
}