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

function createCheckboxComponent({ label, icon, position, orientation }) {
    const checkboxContainer = document.createElement('div');
    checkboxContainer.className = `checkbox-container ${orientation === 'vertical' ? 'flex-col' : ''}`;

    const checkboxInput = document.createElement('input');
    checkboxInput.type = 'checkbox';
    checkboxInput.className = 'checkbox checkbox-primary';
    checkboxInput.id = label;

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

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

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

    if (position === 'left' || orientation === 'vertical') {
        checkboxContainer.appendChild(checkboxLabel);
        checkboxContainer.appendChild(checkboxInput);
    } else {
        checkboxContainer.appendChild(checkboxInput);
        checkboxContainer.appendChild(checkboxLabel);
    }

    return checkboxContainer;
}

document.addEventListener('DOMContentLoaded', () => {
    const checkboxContainer = document.getElementById('checkbox-container');
    checkboxData.forEach(checkboxConfig => {
        const checkboxComponent = createCheckboxComponent(checkboxConfig);
        checkboxContainer.appendChild(checkboxComponent);
    });
});
