const config = [
    {
        title: "To Do",
        cards: [
            { id: 118, title: "Publish the blog post announcing the new app" },
            { id: 116, title: "Update our marketing website about the new app" }
        ]
    },
    {
        title: "Doing",
        cards: [
            { id: 115, title: "Prepare the app for public launch" }
        ]
    },
    {
        title: "Done",
        cards: [
            { id: 117, title: "Release the app in private preview with early adopters" }
        ]
    }
];

function createKanbanBoard(config) {
    const board = document.getElementById('kanban-board');
    config.forEach(column => {
        const columnElement = document.createElement('div');
        columnElement.classList.add('column');

        const titleElement = document.createElement('h3');
        titleElement.textContent = column.title;
        columnElement.appendChild(titleElement);

        const cardContainer = document.createElement('div');
        cardContainer.classList.add('card-container');
        cardContainer.addEventListener('dragover', (e) => e.preventDefault());
        cardContainer.addEventListener('drop', (e) => {
            const cardId = e.dataTransfer.getData('text');
            const card = document.getElementById(cardId);
            e.target.appendChild(card);
        });

        column.cards.forEach(card => {
            const cardElement = document.createElement('div');
            cardElement.classList.add('card');
            cardElement.id = `card-${card.id}`;
            cardElement.textContent = card.title;
            cardElement.draggable = true;

            cardElement.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('text', cardElement.id);
            });

            cardContainer.appendChild(cardElement);
        });

        columnElement.appendChild(cardContainer);
        board.appendChild(columnElement);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    createKanbanBoard(config);
});