const svgs = Array.from(document.querySelectorAll('#europe_svg g'))
const follower = document.getElementById('follower')

const countries = [
    { id: "france", name: "Γαλλία" },
    { id: "italy", name: "Ιταλία" },
    { id: "spain", name: "Ισπανία" },
    { id: "greece", name: "Ελλάδα" },
    { id: "cyprus", name: "Κύπρος" },
    { id: "portugal", name: "Πορτογαλία" },
    { id: "slovenia", name: "Σλοβενία" },
    { id: "bulgaria", name: "Βουλγαρία" }
  ];

window.addEventListener('mousemove', (e) => {
    let top = e.clientY;
    let left = e.clientX;
    follower.style.top = `${top/2}px`;
    follower.style.left = `${left/1.5}px`;
});

// Convert the countries array to a Set of ids for fast lookup
const countryIds = new Set(countries.map(country => country.id));

// Loop through each SVG element
svgs.forEach((svg) => {
    const svgId = svg.getAttribute('id');
    
    if (countryIds.has(svgId)) {
        svg.children[0].style.fill = 'orange';
        svg.style.cursor = 'pointer';
        
        svg.addEventListener('mouseover', () => {
            const country = countries.find(c => c.id === svgId);
            if (country) {
                follower.innerHTML = country.name
                follower.style.transform = 'scale(1)';
                svg.children[0].style.strokeWidth = '10'
            }
        });

        svg.addEventListener('mouseout', () => {
            follower.style.transform = 'scale(0)';
            follower.innerHTML = '';
            svg.children[0].style.strokeWidth = '0'
        });
    }
});

