script.js

// Inicjalizacja ikon
lucide.createIcons();

const transactions = [
    { id: 1, title: 'Starbucks', category: 'Jedzenie', amount: -25.50, icon: 'coffee', color: '#FF9500' },
    { id: 2, title: 'Wypłata', category: 'Praca', amount: 5500.00, icon: 'briefcase', color: '#34C759' },
    { id: 3, title: 'Netflix', category: 'Rozrywka', amount: -43.00, icon: 'play', color: '#FF3B30' },
];

const renderTransactions = () => {
    const list = document.getElementById('transactionList');
    list.innerHTML = transactions.map(t => `
        <div class="transaction-item">
            <div class="icon-box" style="background: ${t.color}20; color: ${t.color}">
                <i data-lucide="${t.icon}"></i>
            </div>
            <div style="flex-grow: 1">
                <div style="font-weight: 600">${t.title}</div>
                <div style="font-size: 0.8rem; color: var(--text-dim)">${t.category}</div>
            </div>
            <div style="font-weight: 700; color: ${t.amount > 0 ? 'var(--accent-green)' : 'white'}">
                ${t.amount > 0 ? '+' : ''}${t.amount.toFixed(2)} PLN
            </div>
        </div>
    `).join('');
    lucide.createIcons(); // Odświeżenie ikon po renderowaniu
};

renderTransactions();

// Obsługa zmiany motywu (prosty toggle)
document.getElementById('themeToggle').addEventListener('click', () => {
    document.body.classList.toggle('light-mode');
    // Tu możemy dodać logikę zmiany zmiennych CSS
});