const languageSelector = document.getElementById("language-selector")
const greetingDisplay = document.getElementById("greeting-text")
const title = document.getElementById("title");
title.innerText = '🎁 Festive Translator 🔔';
languageSelector.addEventListener("change", translate);


const greetingsArr = [
    {
        language: "English",
        greeting: "Merry Christmas!"
    },
    {
        language: "Spanish",
        greeting: "Feliz Navidad!"
    },
    {
        language: "Ukrainian",
        greeting: "щасливого Різдва!"
    },
    {
        language: "Welsh",
        greeting: "Nadolig Llawen!"
    }
]

function translate(){
    // Task: 
    // - Write a function to display the correct greeting when a language is selected.
    
        // console.log(languageSelector.value);
    // languageSelector.value === "English" ? greetingDisplay.innerText = greetingsArr[0].greeting :  greetingDisplay.innerText = ``;

    // languageSelector.value === "Spanish" ? greetingDisplay.innerText = greetingsArr[1].greeting :  greetingDisplay.innerText = ``;    
    
    // languageSelector.value === "Ukrainian" ? greetingDisplay.innerText = greetingsArr[2].greeting :  greetingDisplay.innerText = ``;    
    
    // languageSelector.value === "Welsh" ? greetingDisplay.innerText = greetingsArr[3].greeting :  greetingDisplay.innerText = ``;        

    for (let i=0;i<greetingsArr.length;i++) {
        // console.log(greetingsArr[i].language);
        if (greetingsArr[i].language === languageSelector.value) {
            console.log(greetingsArr[i].language);
            greetingDisplay.innerText = greetingsArr[i].greeting;
        }
    }

}
// translate();

// Stretch goals:
// - Animate the message switch.
// - Add the option to switch the greeting, for example also have "And a Happy New Year!".