const itemsPerPage = 3;
const items = document.querySelectorAll(".gallery-item");
const pagination = document.getElementById("pagination");
const totalPages = Math.ceil(items.length / itemsPerPage);
let currentPage = 1;

function showPage(page) {
    if (page < 1 || page > totalPages) return;
    currentPage = page;

    items.forEach((item, index) => {
        item.style.display =
            index >= (page - 1) * itemsPerPage &&
            index < page * itemsPerPage
                ? ""
                : "none";
    });

    renderPagination();
}

function renderPagination() {
    pagination.innerHTML = "";

    function createItem(label, page, active = false, disabled = false) {
        const li = document.createElement("li");
        if (active) li.classList.add("active");
        if (disabled) li.classList.add("disabled");

        const a = document.createElement("a");
        a.href = "#";
        a.textContent = label;

        a.addEventListener("click", function (e) {
            e.preventDefault();
            if (!disabled) showPage(page);
        });

        li.appendChild(a);
        pagination.appendChild(li);
    }

    // Prev
    createItem("Prev", currentPage - 1, false, currentPage === 1);

    // Page numbers
    for (let i = 1; i <= totalPages; i++) {
        createItem(i, i, i === currentPage);
    }

    // Next
    createItem("Next", currentPage + 1, false, currentPage === totalPages);
}

// Init
showPage(1);