export default async function ItemGallery() {
  try {
    const products: ProductProps[] = await getProductsData();

    return (
      <main className="flex justify-center mx-auto mt-10 max-w-[1080px] text-white relative ">
        <div className="grid grid-cols-4 gap-[50px] ">
          {products.map((product, i) => (
            <div key={i}>
              <ProductSkeleton
                id={product.id}
                title={product.title}
                description={product.description}
                image={product.image}
                price={product.price}
                category={product.category}
              />
            </div>
          ))}
        </div>
      </main>
    );
  } catch (error) {
    console.log(error);
    return <div>Error occurred while fetching posts.</div>;
  }
}