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

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

    // Creature ID section
    let creatureId = document.createElement('div');
    creatureId.className = 'creature_id';
    creatureId.innerHTML = `
                <h2>${creatureName.toUpperCase()}</h2>
                <img src='${window.IMG}/${creatureName}.jpg' onerror='this.src="${window.IMG}/404.jpg";' style='width: 275px; height: 275px;' alt="${creatureName}">
            `;

    let profile = createProfileSection(data);
    let abilities = createAbilitiesSection(data);
    let attacks = createAttacksSection(data);
    let mutations = createMutationsSection(data.mutations); // Notice the data difference
    let description = createDescriptionSection(data);

    container.appendChild(creatureId);
    container.appendChild(profile);
    container.appendChild(abilities);
    container.appendChild(attacks);
    container.appendChild(mutations);
    container.appendChild(description);

    resultSection.appendChild(container);
}