import { stringifyQueryParams } from "@/common/utils/searchParams";
import { Suspense } from "react";
import SearchPage from "./SearchPage";
import SearchBar from "./SearchBar";
import Loading from "@/common/components/Loading";

export interface INextJsProps {
  searchParams?: object;
}

export default async function Search({ searchParams }: INextJsProps) {
  const queryParamString = stringifyQueryParams(searchParams!);

  return (
    <div className={`mx-auto px-2`}>
      <SearchBar />
      <Suspense key={queryParamString} fallback={<Loading />}>
        <SearchPage queryParamString={queryParamString} />
      </Suspense>
    </div>
  );
}