export const metadata: Metadata = {
  title: "Products",
};
const ProductsList = async ({
  searchParams,
}: {
  searchParams: {
    category: string;
  };
}) => {
  let query;

  if (searchParams.category === undefined) {
    query = qs.stringify({
      populate: ["Variants", "Thumbnail", "brand"],
    });
  }

  if (searchParams.category !== undefined) {
    const categories = searchParams.category?.split(",") || [];

    query = qs.stringify({
      filters: {
        $and: [
          {
            categories: {
              slug: categories[0],
            },
          },
          {
            categories: {
              slug: categories[1],
            },
          },
          {
            categories: {
              slug: categories[2],
            },
          },
        ],
      },
      populate: ["Variants", "Thumbnail", "brand"],
    });
  }

  let data: Product[] = [];
  try {
    const res = await api.get(`/api/products?${query}`);
    data = res?.data?.data;
    // console.log(res?.data?.data);
  } catch (error: any) {
    console.log(error?.response?.data);
  }

  return data.length === 0 ? (
    <NotFound />
  ) : (
    <div className="py-4">
      <div className="bg-primary/50 py-10 mb-12">
        <h1 className="text-3xl font-bold text-center">Products</h1>
      </div>
      <div className="pageContainer">
        <div className="productsGrid">
          {data.map((product) => (
            <div key={product?.id}>
              <ProductCard productData={product} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProductsList;