import GeneralServerAxios from "@/shared/AxiosPage/GeneralServerAxios";
import EmptyData from "@/shared/EmptyData";
import ProductsHeader from "@/components/products/ProductsHeader";
import ProductsDetails from "@/components/products/ProductsDetails";
import { getTranslations } from "next-intl/server";

export default async function page({
  searchParams,
}: {
  searchParams: Promise<{
    page?: string;
    category_id?: string;
    sort?: string;
    keyword?: string;
  }>;
}) {
  const params = await searchParams;
  const page = Number(params?.page) || 1;
  const category_id = params?.category_id || "";
  const sort = params?.sort || "";
  const t = await getTranslations();

  const keyword = params?.keyword;
  return (
    <GeneralServerAxios
      url={"guest/products"}
      params={{
        page,
        ...(category_id && { "filters[category_id]": category_id }),
        ...(keyword && { search: keyword }),
      }}
    >
      {(data) => (
        <div className="overflow-hidden lg:py-20 py-36">
          <div className="min-h-[calc(100vh-80px)]">
            {(category_id || sort) && (
              <section className="relative bg-gradient-to-br from-primary-light to-white overflow-hidden">
                <div className="container py-8 md:py-12">
                  <div className="text-center max-w-3xl mx-auto">
                    <ProductsHeader category_id={category_id} sort={sort} />
                    <p className="text-base md:text-lg text-text-secondary leading-relaxed">
                      {t("Text.products_count", { count: data?.meta?.total })}
                    </p>
                  </div>
                </div>
              </section>
            )}
            <div className="container py-8 md:py-12">
              {data?.products?.length > 0 ? (
                <ProductsDetails
                  products={data?.products}
                  paggination={data?.meta}
                  current_page={page}
                />
              ) : (
                <EmptyData />
              )}
            </div>
          </div>
        </div>
      )}
    </GeneralServerAxios>
  );
}