import {createProfileSection} from "./createProfileSection.js";
import {createAbilitiesSection} from "./createAbilitiesSection.js";
import {createDescriptionSection} from "./createDescriptionSection.js";

export function androidResultTable(data, creatureName) {
    let container = document.createElement('div');
    container.className = 'container android';

    let creatureTitle = document.createElement('h2');
    creatureTitle.textContent = creatureName.toUpperCase();
    container.appendChild(creatureTitle)

    let image = document.createElement('img');
    image.src = `${window.IMG}/android.jpg`;
    image.onerror = () => { image.src = `${window.IMG}/404.jpg` };
    image.style.width = '275px';
    image.style.height = '275px';
    container.appendChild(image);

    let description = createDescriptionSection(data);
    container.appendChild(description);

    Object.entries(data).forEach(([key, value]) => {

        if (key === 'thinker' || key === 'worker' || key === 'warrior') {
            let typeTitle = document.createElement('h2');
            typeTitle.textContent = key.toUpperCase();
            container.appendChild(typeTitle);

            // Create a div for each type (thinker, worker, or warrior)
            let typeContainer = document.createElement('div');
            typeContainer.className = 'typeContainer'; // we'll use this in css

            let profile = createProfileSection(value);
            let abilities = createAbilitiesSection(value);

            // Append profile and abilities to the typeContainer, instead of the main container
            typeContainer.appendChild(profile);
            typeContainer.appendChild(abilities);

            // Finally, append the typeContainer to the main container.
            container.appendChild(typeContainer);
        }
    });

    resultSection.appendChild(container);
}