// BLOG //

const apiKey = "AIzaSyDPFYq_Q8pu7hexnLiZPFF6HTgZiSg9PdY";
const spreadsheetId = "1C2a1xtx1hzZXRK4wN7Mp0HkMbshy7aXUT3SrnEGPirc";
const sheetName = "Blog-card";  // Change to your sheet name

fetch(`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${sheetName}?key=${apiKey}`)
    .then(response => response.json())
    .then(data => {
        console.log("Fetched Data:", data); // Debugging - Check if data is received
        displayBlogPosts(data);
    })
    .catch(error => console.error("Error fetching data:", error));

function displayBlogPosts(data) {
    const blogContainer = document.getElementById("blogContainer");
    
    // Clear previous content (useful if reloading dynamically)
    blogContainer.innerHTML = "";

    if (!data.values || data.values.length < 2) {
        console.error("No valid blog data found!");
        return;
    }

    // Extract headers and rows
    const headers = data.values[0]; // First row are column names
    const rows = data.values.slice(1); // All blog entries

    // Loop through each row and create a blog card
    rows.forEach(row => {
        const [id, category, title, description, imageUrl, articleUrl] = row; // Adjust based on column order

        // Create blog card element
        const blogCard = document.createElement("div");
        blogCard.classList.add("blog-card");

        blogCard.addEventListener("click", function () {
            window.location.href = `article.html?id=${id}`;
        });

        blogCard.innerHTML = `
            <div class="blog-card-img" style="background-image: url('${imageUrl}')"></div>
            <div class="blog-card-content">
                <div class="bc-tag">
                    <h3>${category}</h3>
                    <div class="blog-line"></div>
                </div>
                <h1>${title}</h1>
                <h2>${description}</h2>
            </div>
        `;

        // Append to the blog container
        blogContainer.appendChild(blogCard);
    });
}