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

function createToggleComponent({ label, icon, position, type }) {
    const toggleContainer = document.createElement('div');
    toggleContainer.className = `toggle-container`;

    const toggleInput = document.createElement('input');
    toggleInput.type = 'checkbox';
    toggleInput.className = `toggle-input toggle-input-${type}`;
    toggleInput.id = label;

    const toggleLabel = document.createElement('label');
    toggleLabel.className = `toggle-label toggle-label-${position}`;
    toggleLabel.htmlFor = label;

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

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

    if (position === 'left') {
        toggleContainer.appendChild(toggleLabel);
        toggleContainer.appendChild(toggleInput);
    } else {
        toggleContainer.appendChild(toggleInput);
        toggleContainer.appendChild(toggleLabel);
    }

    return toggleContainer;
}

document.addEventListener('DOMContentLoaded', () => {
    const toggleContainer = document.getElementById('toggle-container');
    toggleData.forEach(toggleConfig => {
        const toggleComponent = createToggleComponent(toggleConfig);
        toggleContainer.appendChild(toggleComponent);
    });
});
