const dropdownData = [
    { label: 'Options', placeholder: 'Select an option', description: 'Choose one of the following items', items: ['Item 1', 'Item 2', 'Item 3'] },
    { placeholder: 'Select without label', items: ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G', 'Item H', 'Item I', 'Item J', 'Item K'] },
    { label: 'Options 2', placeholder: 'Choose an item', description: 'Additional description lorem ipsum', items: ['Option 1', 'Option 2', 'Option 3'] },
];

function createDropdownComponent({ label, placeholder, description, items }) {
    const dropdownContainer = document.createElement('div');
    dropdownContainer.className = 'dropdown-container mb-6';

    if (label) {
        const labelElement = document.createElement('label');
        labelElement.className = 'dropdown-label block text-gray-700 text-sm font-bold mb-2';
        labelElement.innerText = label;
        dropdownContainer.appendChild(labelElement);
    }

    const buttonElement = document.createElement('div');
    buttonElement.className = 'dropdown-button';
    buttonElement.innerText = placeholder || 'Select an option';
    dropdownContainer.appendChild(buttonElement);

    const dropdownList = document.createElement('div');
    dropdownList.className = 'dropdown-list';
    dropdownList.style.display = 'none';

    if (description) {
        dropdownList.classList.add('dropdown-list-with-description');
    } else {
        dropdownList.classList.add('dropdown-list-no-description');
    }

    items.forEach(item => {
        const itemElement = document.createElement('div');
        itemElement.className = 'dropdown-item';
        
        const itemText = document.createElement('span');
        itemText.className = 'dropdown-item-text';
        itemText.innerText = item;

        itemElement.appendChild(itemText);
        itemElement.addEventListener('click', () => {
            buttonElement.innerHTML = '';
            buttonElement.className = 'dropdown-button selected-dropdown-item';
            
            const selectedItemText = document.createElement('span');
            selectedItemText.className = 'selected-dropdown-item-text';
            selectedItemText.innerText = item;
            buttonElement.appendChild(selectedItemText);

            dropdownList.style.display = 'none';
        });

        dropdownList.appendChild(itemElement);
    });

    buttonElement.addEventListener('click', (event) => {
        event.stopPropagation();
        dropdownList.style.display = dropdownList.style.display === 'none' ? 'flex' : 'none';
    });

    document.addEventListener('click', (event) => {
        if (!dropdownContainer.contains(event.target)) {
            dropdownList.style.display = 'none';
        }
    });

    dropdownContainer.appendChild(dropdownList);

    if (description) {
        const descriptionElement = document.createElement('p');
        descriptionElement.className = 'dropdown-description text-gray-600 text-xs italic mt-2';
        descriptionElement.innerText = description;
        dropdownContainer.appendChild(descriptionElement);
    }

    return dropdownContainer;
}

document.addEventListener('DOMContentLoaded', () => {
    console.log("Document loaded, rendering dropdowns...");
    const dropdownContainer = document.getElementById('dropdown-container');
    dropdownData.forEach(dropdownConfig => {
        const dropdownComponent = createDropdownComponent(dropdownConfig);
        dropdownContainer.appendChild(dropdownComponent);
    });
});