const radiobuttonData = [
    { label: 'Option 1', position: 'right' },
    { label: 'Option 2', icon: '📞', position: 'right' },
    { label: 'Option 3', icon: '📞', position: 'left' },
    { label: 'Option 4', icon: '📞', position: 'left' },
];

function createRadiobuttonComponent({ label, icon, position }) {
    const radioContainer = document.createElement('div');
    radioContainer.className = 'radio-container';

    const radioInput = document.createElement('input');
    radioInput.type = 'radio';
    radioInput.className = 'radio-input';
    radioInput.name = 'radio';
    radioInput.id = label;

    const radioLabel = document.createElement('label');
    radioLabel.className = `radio-label`;
    radioLabel.htmlFor = label;

    if (position === 'left') {
        radioContainer.appendChild(radioInput);
    }

    if (icon) {
        const iconElement = document.createElement('span');
        iconElement.className = 'icon';
        iconElement.innerText = icon;
        radioLabel.appendChild(iconElement);
    }

    if (label) {
        const labelText = document.createElement('span');
        labelText.innerText = label;
        radioLabel.appendChild(labelText);
    }

    if (position === 'right') {
        radioContainer.appendChild(radioInput);
    }

    if (position === 'left') {
        radioContainer.appendChild(radioLabel);
    } else {
        radioContainer.insertBefore(radioLabel, radioInput);
    }

    return radioContainer;
}

document.addEventListener('DOMContentLoaded', () => {
    const radiobuttonContainer = document.getElementById('radiobutton-container');
    radiobuttonData.forEach(radiobuttonConfig => {
        const radiobuttonComponent = createRadiobuttonComponent(radiobuttonConfig);
        radiobuttonContainer.appendChild(radiobuttonComponent);
    });
});