// src/js/script.js

import { fetchData } from './get.js'; // Importujemy funkcję fetchData

document.addEventListener('DOMContentLoaded', () => {
    const prawyDiv = document.getElementById('prawy'); // Pobieramy element <div id="prawy">
    const lista = prawyDiv.querySelector('ol'); // Pobieramy listę <ol>

    fetchData() // Wywołujemy funkcję fetchData
        .then(data => {
            // Filtruj dane według kategorii
            const obiady = data.filter(item => item.kategoria === 'obiady');
            const przekaski = data.filter(item => item.kategoria === 'przekąski');
            const kolacje = data.filter(item => item.kategoria === 'kolacje');

            // Funkcja do renderowania elementów
            const renderItems = (items) => items.map(item => 
                `<li>${item.nazwa} - ${item.cena} zł</li>`
            ).join('');

            // Tworzymy HTML dla każdej kategorii
            const htmlContent = `
                <li>Obiady od 40 zł<br><ul>${renderItems(obiady)}</ul></li>
                <li>Przekąski od 10 zł<br><ul>${renderItems(przekaski)}</ul></li>
                <li>Kolacje od 20 zł<br><ul>${renderItems(kolacje)}</ul></li>
            `;

            // Wstawiamy wygenerowany HTML do listy
            lista.innerHTML = htmlContent;
        })
        .catch(error => {
            console.error('Błąd podczas ładowania danych:', error);
        });
});