const API_URL = 'https://prova.patachina.it/photos';

async function loadPhotos() {
  const res = await fetch(API_URL);
  if (!res.ok) {
    console.error('Errore nel fetch', res.status);
    return;
  }
  const data = await res.json();
  renderGallery(data);
}

function renderGallery(photos) {
  const gallery = document.getElementById('gallery');
  gallery.innerHTML = '';

  photos.forEach(photo => {
    const thumbDiv = document.createElement('div');
    thumbDiv.className = 'thumb';

    const img = document.createElement('img');
    // anteprima
    img.src = `https://prova.patachina.it/${photo.thub1}`;
    img.alt = photo.name || '';

    thumbDiv.appendChild(img);

    // click: apri immagine grande
    thumbDiv.addEventListener('click', () => {
      openModal(`https://prova.patachina.it/${photo.path}`);
    });

    gallery.appendChild(thumbDiv);
  });
}

// Modal
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImage');
const modalClose = document.getElementById('modalClose');

function openModal(src) {
  modalImg.src = src;
  modal.classList.add('open');
}

function closeModal() {
  modal.classList.remove('open');
  modalImg.src = '';
}

modalClose.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
  if (e.target === modal) closeModal();
});

// avvio
loadPhotos();