export default function enableLensEffect(container) {
    container
        .querySelectorAll('.hover-lens')
        .forEach(link => {
            const img = link.querySelector('img');
            if (!img) return;

            link.addEventListener('mousemove', e => {
                const rect = link.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                link.style.setProperty('--lens-x', `${x}px`);
                link.style.setProperty('--lens-y', `${y}px`);
                link.style.setProperty('--lens-bg', `url(${img.src})`);
                link.style.setProperty(
                    '--lens-pos',
                    `${(x / rect.width) * 100}% ${(y / rect.height) * 100}%`
                );
                link.style.backgroundImage = `url(${img.src})`;
            });

            link.addEventListener('mouseenter', () => {
                const rect = link.getBoundingClientRect();
                link.style.setProperty('--lens-bg', `url(${img.src})`);
                link.style.setProperty('--lens-pos', `center center`);
                link.style.setProperty('--lens-x', `${rect.width / 2}px`);
                link.style.setProperty('--lens-y', `${rect.height / 2}px`);
                link.classList.add('active');
            });

            link.addEventListener('mouseleave', () => {
                link.classList.remove('active');
                link.style.removeProperty('background-image');
            });
        });
}