document.addEventListener('DOMContentLoaded', () => {
    const waterfallContainer = document.getElementById('waterfallContainer');
    const addCard = document.getElementById('addCard');

    // Fetch data from API and render cards
    fetchDataAndRenderCards();

    // Add new group card click handler
    addCard.addEventListener('click', () => {
        alert('Add new group functionality will be implemented here.');
    });
});

async function fetchDataAndRenderCards() {
    try {
        const response = await fetch('https://api.example.com/cards');
        const data = await response.json();
        renderCards(data);
    } catch (error) {
        console.error('Error fetching card data:', error);
    }
}

function renderCards(data) {
    const waterfallContainer = document.getElementById('waterfallContainer');

    data.forEach(item => {
        const card = document.createElement('div');
        card.classList.add('card');

        card.innerHTML = `
            <img src="${item.imageUrl}" alt="${item.title}">
            <h3>${item.title}</h3>
            <p>${item.description}</p>
        `;

        waterfallContainer.appendChild(card);
    });
}