Image Products Viewer

function processImage(originalImg, productName = 'Sample Product', productPrice = 99.99, currencySymbol = '$', label = '', labelColor = '#e74c3c') {
    // Create the main container for the product card
    const card = document.createElement('div');
    card.style.width = '300px';
    card.style.border = '1px solid #eee';
    card.style.borderRadius = '8px';
    card.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
    card.style.fontFamily = 'Arial, sans-serif';
    card.style.overflow = 'hidden';
    card.style.backgroundColor = '#ffffff';
    card.style.display = 'inline-block';
    card.style.margin = '10px';
    card.style.transition = 'transform 0.2s ease-in-out';
    card.onmouseover = () => card.style.transform = 'scale(1.02)';
    card.onmouseleave = () => card.style.transform = 'scale(1)';

    // Create a container for the image and the label
    const imageContainer = document.createElement('div');
    imageContainer.style.position = 'relative';
    imageContainer.style.backgroundColor = '#f8f8f8'; // A light background for the image
    
    // Use a clone of the original image to avoid modifying it
    const img = originalImg.cloneNode(true);
    img.style.width = '100%';
    img.style.height = 'auto';
    img.style.display = 'block';

    imageContainer.appendChild(img);

    // Add a label (e.g., "Sale", "New") if provided
    if (label && String(label).trim() !== '') {
        const labelEl = document.createElement('span');
        labelEl.innerText = label;
        labelEl.style.position = 'absolute';
        labelEl.style.top = '12px';
        labelEl.style.left = '12px';
        labelEl.style.backgroundColor = labelColor;
        labelEl.style.color = '#ffffff';
        labelEl.style.padding = '5px 10px';
        labelEl.style.borderRadius = '4px';
        labelEl.style.fontSize = '12px';
        labelEl.style.fontWeight = 'bold';
        labelEl.style.textTransform = 'uppercase';
        labelEl.style.letterSpacing = '0.5px';
        imageContainer.appendChild(labelEl);
    }

    // Create a container for the product information (name and price)
    const infoContainer = document.createElement('div');
    infoContainer.style.padding = '16px';
    infoContainer.style.textAlign = 'left';

    // Add the product name
    const nameEl = document.createElement('h3');
    nameEl.innerText = productName;
    nameEl.style.margin = '0 0 8px 0';
    nameEl.style.fontSize = '20px';
    nameEl.style.color = '#333';
    nameEl.style.fontWeight = '600';

    // Add the product price
    const priceEl = document.createElement('p');
    // Ensure price is a number and format it to two decimal places
    const formattedPrice = parseFloat(productPrice).toFixed(2);
    priceEl.innerText = `${currencySymbol}${formattedPrice}`;
    priceEl.style.margin = '0';
    priceEl.style.fontSize = '18px';
    priceEl.style.fontWeight = 'bold';
    priceEl.style.color = '#111';

    infoContainer.appendChild(nameEl);
    infoContainer.appendChild(priceEl);

    // Assemble the card
    card.appendChild(imageContainer);
    card.appendChild(infoContainer);

    // Return the final product card element
    return card;
}