import { searchProducts } from "@/lib/queries";
import Header from "@/components/header";
import Footer from "@/components/footer";
import ProductCard from "@/components/productCard";
import { SearchX } from "lucide-react";

export default async function SearchPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q } = await searchParams;
  const query = q?.trim() ?? "";
  const results = query ? await searchProducts(query) : [];

  return (
    <>
      <Header />
      <section className="max-w-7xl mx-auto px-4 py-12">
        <h1 className="font-display font-semibold text-2xl uppercase text-ink mb-2">
          {query ? `Results for "${query}"` : "Search"}
        </h1>
        {query && (
          <p className="text-sm text-ink/50 mb-8">
            {results.length} product{results.length !== 1 ? "s" : ""} found
          </p>
        )}

        {!query ? (
          <p className="text-ink/60">Enter a search term above to find products.</p>
        ) : results.length === 0 ? (
          <div className="bg-white border border-line rounded-xl py-16 text-center">
            <SearchX size={32} className="text-ink/20 mx-auto mb-3" />
            <p className="text-ink/60">
              No products found matching &quot;{query}&quot;.
            </p>
            <p className="text-sm text-ink/40 mt-1">
              Try a different search term, or browse by category instead.
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
            {results.map((product, index) => (
              <ProductCard key={product.slug} product={product} index={index} />
            ))}
          </div>
        )}
      </section>
      <Footer />
    </>
  );
}