UI.js

// UI.js
export class UI {
    static renderTasks(state, onDelete) {
        const columns = ['todo', 'doing', 'done'];
        
        columns.forEach(col => {
            const container = document.getElementById(col);
            container.innerHTML = ''; // Clear the column
            
            state[col].forEach(task => {
                const taskEl = document.createElement('div');
                taskEl.className = 'task-card';
                taskEl.draggable = true;
                taskEl.id = task.id;
                
                taskEl.innerHTML = `
                    <p>${task.content}</p>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span>${task.timestamp}</span>
                        <button class="del-btn" data-id="${task.id}" data-col="${col}" 
                                style="background:none; color:#ff4d4d; padding:0; font-size:12px;">Delete</button>
                    </div>
                `;
                
                // Drag start logic
                taskEl.addEventListener('dragstart', (e) => {
                    taskEl.classList.add('dragging');
                    e.dataTransfer.setData('taskId', task.id);
                    e.dataTransfer.setData('sourceCol', col);
                });

                taskEl.addEventListener('dragend', () => {
                    taskEl.classList.remove('dragging');
                });

                // Delete logic
                taskEl.querySelector('.del-btn').addEventListener('click', (e) => {
                    onDelete(e.target.dataset.id, e.target.dataset.col);
                });

                container.appendChild(taskEl);
            });
        });
    }
}