EDU-16043: ProductCard review #2151

docs/faststore/components/molecules/product-card.mdx

 The `ProductCard` displays summarized information about a product. It usually presents a call-to-action button, as well as the product's name, price, and image. The `ProductCard` is composed of the following components: 
 </ProductCardImage> 
 isVariantOf: { name: "Apple Mouse" }, 
 return useMemo(() => formatter(price), [formatter, price]); 
 <ProductCardContent 
 offers: [ 
@@ -1,4 +1,4 @@
----
+---
 title: "ProductCard"
 excerpt: Displays summarized information about a product.
 components:
@@ -25,25 +25,7 @@ Use the `ProductCard` to:
     <OverviewSection
       containerStyle={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}
     >
-      <ProductCard>
-        <ProductCardImage>
-          <img
-            data-fs-image
-            src={product.image[1].url}
-            alt={product.image[1].alternateName}
-          />
-        </ProductCardImage>
-        <ProductCardContent
-          title={product.isVariantOf.name}
-          price={{
-            value: product.offers.offers[0].price,
-            listPrice: product.offers.offers[0].listPrice,
-            formatter: useFormattedPrice,
-          }}
-          ratingValue={3.5}
-          onButtonClick={() => {}}
-        />
-      </ProductCard>
+      <ProductCardUsage />
     </OverviewSection>
   </Tab>
   <Tab>
@@ -589,6 +571,111 @@ To replicate this style, add the prop to both `ProductCard` and `ProductCardCont
   </Tab>
 </Tabs>
 
+### Button Click Action
+
+<Tabs items={["Example", "Code"]} defaultIndex="0">
+  <Tab>
+    <OverviewSection containerStyle={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
+      <ProductCard>
+        <ProductCardImage>
+          <img
+            data-fs-image
+            src={product.image[1].url}
+            alt={product.image[1].alternateName}
+          />
+        </ProductCardImage>
+        <ProductCardContent
+          title={product.isVariantOf.name}
+          price={{
+            value: product.offers.offers[0].price,
+            listPrice: product.offers.offers[0].listPrice,
+            formatter: useFormattedPrice,
+          }}
+          ratingValue={4}
+          onButtonClick={() => console.log('Product action triggered')}
+        />
+      </ProductCard>
+    </OverviewSection>
+  </Tab>
+  <Tab>
+    ```tsx
+    import { useCallback, useMemo } from "react";
+    import {
+      ProductCard,
+      ProductCardImage,
+      ProductCardContent,
+    } from "@faststore/ui";
+
+    const product = {
+      isVariantOf: { name: "Apple Mouse" },
+      image: [
+        {},
+        {
+          url: "https://vtexhelp.vtexassets.com/assets/docs/img/faststore/product-placeholder___1e7c8f8d9f38b8a0a8f8a6a8a0f5e07d.png",
+          alternateName: "Apple Mouse",
+        },
+      ],
+      offers: {
+        offers: [
+          {
+            price: 950.04,
+            listPrice: 999,
+            availability: "https://schema.org/InStock",
+          },
+        ],
+      },
+    };
+
+    interface PriceFormatterOptions {
+      decimals?: boolean;
+    }
+    export const usePriceFormatter = ({ decimals }: PriceFormatterOptions = {}) => {
+      return useCallback(
+        (price: number) =>
+          Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+            minimumFractionDigits: decimals ? 2 : 0,
+          }).format(price),
+        [decimals]
+      );
+    };
+    export const useFormattedPrice = (price: number) => {
+      const formatter = usePriceFormatter();
+      return useMemo(() => formatter(price), [formatter, price]);
+    };
+
+    export function Example() {
+      const handleClick = () => {
+        console.log("Product action triggered");
+      };
+
+      return (
+        <ProductCard>
+          <ProductCardImage>
+            <img
+              data-fs-image
+              src={product.image[1].url}
+              alt={product.image[1].alternateName}
+            />
+          </ProductCardImage>
+          <ProductCardContent
+            title={product.isVariantOf.name}
+            price={{
+              value: product.offers.offers[0].price,
+              listPrice: product.offers.offers[0].listPrice,
+              formatter: useFormattedPrice,
+            }}
+            ratingValue={4}
+            onButtonClick={handleClick}
+          />
+        </ProductCard>
+      );
+    }
+    ```
+  </Tab>
+</Tabs>
+
 ---
 
 ## Design tokens
@@ -766,7 +853,9 @@ Adjusts the bordered variant outline via border width and color for a subtle fra
   />
 </TokenTable>
 
-#### Wide
+### Design tokens: Wide
+
+Defines layout and spacing for the wide variant, covering padding, content padding, minimum width, and background color.
 
 <TokenTable>
   <TokenRow token="--fs-product-card-wide-padding" value="0" />