import { Arama } from "@/services/public";
import Breadcrumb, { BreadcrumbItem } from '@/components/breadcrumb';
import Metadata from '@/components/Metadata';
import SearcItem from './SerchItem';

type Props = {
  searchParams: Promise<{ q?: string | string[] }>;
};

const SearchPage = async ({ searchParams }: Props) => {


  const currSearchParams = await searchParams;
  const query = currSearchParams.q;

  // Eğer sorgu yoksa "yok" bileşenini döndür
  if (!query || typeof query !== "string") {
    return renderWithLayout(
      <div className="font-bold text-lg"> Herhangi Bir arama Yapılmadı</div>
    );
  }

  // Arama yapılmışsa sonuç bileşenini döndür
  const data = await Arama(query);


  return renderWithLayout(
    <>
      <h2 className="text-primary font-bold text-2xl">Arama Anahtar Kelimesi:<span className="font-normal uppercase"> {query} </span></h2>

      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4">
        {data.length > 0 ? (
          data.map((item) => (
            <SearcItem
              key={item._id}  // Benzersiz key kullanıyoruz
              logo={item.logo}
              brand={item.brand}
              counts={item.counts}
              link={`/products?q=${query}&brand=${item._id}`} // Linki oluşturuyoruz
            />
          ))
        ) : (
          <div className="font-bold text-lg">Sonuç bulunamadı.</div>
        )}
      </div> </>);

};

// Layout'u sarma işlevi
function renderWithLayout(children: React.ReactNode) {

  const bread: BreadcrumbItem[] = [
    {
      href: '',
      label: 'Hızlı Arama',
      isCurrent: true,
    },
  ];

  return <>
    <Metadata seoTitle="Hızlı Arama" seoDescription="Hızlı Arama" />
    <Breadcrumb items={bread} />

    <div className="container py-20">
      {children}
    </div>
  </>;
}

export default SearchPage;