Image Character Category Selector

/**
 * Creates an interactive UI component to categorize a character image.
 * This function displays the provided image along with a set of buttons,
 * allowing a user to select a category for the character.
 *
 * @param {Image} originalImg The original JavaScript Image object of the character.
 * @param {string} categories A comma-separated string of category names to be used for the buttons.
 * @param {string} label The instructional text to display above the category buttons.
 * @returns {HTMLElement} A single div element containing the image and the interactive category selector UI.
 */
function processImage(originalImg, categories = 'Hero,Villain,Sidekick,Mentor,Protagonist,Antagonist', label = 'Select a category for this character:') {
    // 1. Create the main container element
    const container = document.createElement('div');
    container.style.display = 'inline-flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.fontFamily = 'Arial, Helvetica, sans-serif';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.padding = '16px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    container.style.maxWidth = '400px';

    // 2. Create and add the image element
    const imgElement = document.createElement('img');
    imgElement.src = originalImg.src;
    imgElement.alt = 'Character Image';
    imgElement.style.maxWidth = '100%';
    imgElement.style.height = 'auto';
    imgElement.style.maxHeight = '300px';
    imgElement.style.marginBottom = '12px';
    imgElement.style.borderRadius = '4px';
    container.appendChild(imgElement);

    // 3. Create and add the instructional label
    const labelElement = document.createElement('p');
    labelElement.textContent = label;
    labelElement.style.margin = '0 0 12px 0';
    labelElement.style.fontWeight = 'bold';
    labelElement.style.fontSize = '16px';
    labelElement.style.color = '#333';
    container.appendChild(labelElement);

    // 4. Create a container for the buttons
    const buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'flex';
    buttonContainer.style.flexWrap = 'wrap';
    buttonContainer.style.justifyContent = 'center';
    buttonContainer.style.gap = '8px';

    // 5. Parse categories and create a button for each
    const categoryList = categories.split(',').map(cat => cat.trim()).filter(cat => cat.length > 0);
    let selectedButton = null;

    // This element will show the current selection
    const selectionStatus = document.createElement('p');
    selectionStatus.textContent = 'No category selected.';
    selectionStatus.style.marginTop = '12px';
    selectionStatus.style.fontSize = '14px';
    selectionStatus.style.color = '#555';
    selectionStatus.style.minHeight = '20px'; // Prevent layout shift

    categoryList.forEach(category => {
        const button = document.createElement('button');
        button.textContent = category;

        // Basic styling for buttons
        Object.assign(button.style, {
            padding: '8px 16px',
            border: '1px solid #ddd',
            borderRadius: '20px',
            backgroundColor: '#fff',
            cursor: 'pointer',
            fontSize: '14px',
            transition: 'all 0.2s ease-in-out',
        });

        // Hover effect
        button.addEventListener('mouseenter', () => {
            if (button !== selectedButton) {
                button.style.backgroundColor = '#e9e9e9';
                button.style.borderColor = '#bbb';
            }
        });
        button.addEventListener('mouseleave', () => {
             if (button !== selectedButton) {
                button.style.backgroundColor = '#fff';
                button.style.borderColor = '#ddd';
            }
        });

        // Click handler for selection
        button.addEventListener('click', () => {
            // Deselect the previously selected button
            if (selectedButton) {
                selectedButton.style.backgroundColor = '#fff';
                selectedButton.style.color = '#000';
                selectedButton.style.borderColor = '#ddd';
                selectedButton.style.fontWeight = 'normal';
            }

            // Select the new button
            selectedButton = button;
            selectedButton.style.backgroundColor = '#007bff';
            selectedButton.style.color = '#fff';
            selectedButton.style.borderColor = '#007bff';
            selectedButton.style.fontWeight = 'bold';

            // Update the status text
            selectionStatus.textContent = `Selected: ${category}`;
        });

        buttonContainer.appendChild(button);
    });

    container.appendChild(buttonContainer);
    container.appendChild(selectionStatus);

    // 6. Return the fully assembled UI component
    return container;
}