export const Skins = () => {
    const skins = document.querySelectorAll('[data-widget="skins"]');

    if (!skins) return;

    skins.forEach(item => {

        const name = item.dataset.name;

        const bg = document.querySelectorAll(`[data-bg-content="${name}"]`);
        const list = document.querySelectorAll(`[data-bg-list="${name}"]`);
        const btn = item.querySelectorAll(`[data-active="${name}-item"]`);

        btn.forEach(itemBtn => {
            itemBtn.addEventListener('click', () => {
                btn.forEach(el => {el.classList.remove('active')});
                itemBtn.classList.add('active');
                const theme = itemBtn.dataset.theme;

                bg.forEach((item) => {
                    item.classList.remove('active');

                    if (item.dataset.theme === theme) {
                        item.classList.add('active');
                    }
                });

                list.forEach((item) => {
                    item.classList.remove('active');

                    if (item.dataset.theme === theme) {
                        item.classList.add('active');
                    }
                });
            });
        });
    });
}