import React, { Suspense } from "react";
import { SearchResults } from "./SearchResults";

/**
 * ⚡ Optimization: Server-Side Rendering (SSR) for Search Results
 * Refactored from a client-side 'useEffect' fetch to a Server Component.
 * - Eliminates client-side fetch waterfall and loading flash.
 * - Improves TTFB, FCP, and SEO.
 * - Correctly handles search query from URL (standardized on 'q').
 */
export default async function SearchPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q } = await searchParams;
  const query = typeof q === "string" ? q : "";

  return (
    <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 max-w-screen-xl mx-auto my-4 px-4">
      <div className="flex flex-col space-y-4 w-full md:w-1/5">
        {/* Placeholder for future filters */}
      </div>
      <Suspense
        key={query}
        fallback={
          <div className="flex-1 p-10 text-center text-muted-foreground animate-pulse">
            Suche läuft...
          </div>
        }
      >
        <SearchResults query={query} />
      </Suspense>
    </div>
  );
}