feat: introduce ProductImage component to streamline image handling in PrerenderProduct and ProductDetailPage

src/PrerenderProduct.js

@@ -13,6 +13,7 @@ const {
 } = require('@mui/material');
 const Footer = require('./components/Footer.js').default;
 const { Logo } = require('./components/header/index.js');
+const ProductImage = require('./components/ProductImage.js').default;
 
 // Utility function to clean product names by removing trailing number in parentheses
 const cleanProductName = (name) => {
@@ -170,50 +171,11 @@ class PrerenderProduct extends React.Component {
             },
             // Product Image Section
             React.createElement(
-              Box,
+              ProductImage,
               {
-                sx: {
-                  width: { xs: "100%", sm: "555px" },
-                  maxWidth: "100%",
-                  minHeight: "400px",
-                  background: "#f8f8f8",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }
-              },
-              !product.pictureList && React.createElement(
-                CardMedia,
-                {
-                  component: 'img',
-                  height: '400',
-                  image: '/assets/images/nopicture.jpg',
-                  alt: product.name,
-                  sx: { objectFit: 'cover' }
-                }
-              ),
-              product.pictureList && React.createElement(
-                Box,
-                { sx: { position: 'relative', display: 'inline-block' } },
-                React.createElement(
-                  CardMedia,
-                  {
-                    component: 'img',
-                    height: '400',
-                    image: mainImage,
-                    alt: product.name,
-                    sx: { 
-                      objectFit: 'contain',
-                      cursor: 'pointer',
-                      transition: 'transform 0.2s ease-in-out',
-                      '&:hover': {
-                        transform: 'scale(1.02)'
-                      }
-                    }
-                  }
-                )
-              )
+                product: product,
+                isPrerender: true
+              }
             ),
             // Product Details Section
             React.createElement(