Image Action And Category Organizer

/**
 * Creates a display card for an image with a category and an action label.
 * The function generates an HTML element that organizes the image visually
 * with the provided metadata, styled as a neat card.
 *
 * @param {HTMLImageElement} originalImg The loaded image object.
 * @param {string} [category='Uncategorized'] The category text to display for the image.
 * @param {string} [action='View Details'] The action text to display for the image.
 * @returns {HTMLDivElement} A div element containing the image and its information.
 */
function processImage(originalImg, category = 'Uncategorized', action = 'View Details') {
    // Create the main container div which will act as the card
    const container = document.createElement('div');
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '8px';
    container.style.padding = '16px';
    container.style.fontFamily = 'Arial, Helvetica, sans-serif'; // Web-safe font stack
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
    container.style.display = 'inline-block'; // To make the container wrap its content
    container.style.textAlign = 'left';
    container.style.overflow = 'hidden'; // Ensures content respects the border-radius

    // Set a max-width based on the image's natural width, with a fallback
    const imageWidth = originalImg.naturalWidth > 0 ? originalImg.naturalWidth : 300;
    container.style.maxWidth = `${imageWidth}px`;
    container.style.minWidth = '200px';

    // Clone the provided image element to avoid modifying the original
    const imgElement = originalImg.cloneNode(true);
    imgElement.style.maxWidth = '100%';
    imgElement.style.height = 'auto'; // Maintain aspect ratio
    imgElement.style.display = 'block'; // Remove bottom space from image
    imgElement.style.marginBottom = '16px'; // Space between image and text
    imgElement.style.borderRadius = '4px'; // Slightly rounded corners for the image
    container.appendChild(imgElement);

    // Create a container for the textual information
    const infoContainer = document.createElement('div');

    // Helper function to create a styled information row with a label and value
    const createInfoRow = (labelText, valueText) => {
        const row = document.createElement('p');
        row.style.margin = '0 0 8px 0'; // Clean margin for paragraph
        row.style.fontSize = '14px';
        row.style.lineHeight = '1.4';
        row.style.color = '#333333';
        row.style.wordWrap = 'break-word'; // Handle long text without breaking layout
        row.style.overflowWrap = 'break-word';

        const label = document.createElement('strong');
        label.textContent = `${labelText}: `;
        label.style.color = '#666666';

        const value = document.createElement('span');
        value.textContent = valueText;

        row.appendChild(label);
        row.appendChild(value);
        return row;
    };

    // Create and append the category and action rows using the Russian labels
    // from the prompt's description "Действие и категория"
    const categoryRow = createInfoRow('Категория', category); // "Категория" means "Category"
    const actionRow = createInfoRow('Действие', action);     // "Действие" means "Action"

    infoContainer.appendChild(categoryRow);
    infoContainer.appendChild(actionRow);

    // Append the info container to the main card
    container.appendChild(infoContainer);

    return container;
}