// src/components/Gallery.jsx
import { h } from 'preact';

export default function Gallery({ images = [] }) {
  // Uvijek vraćamo isti 'div' wrapper da spriječimo hydration mismatch
  return (
    <div style={{ marginTop: '1rem' }}>
      {!images || images.length === 0 ? (
        <p class="text-sm text-gray-500 italic">Nema fotografija za ovaj nalog.</p>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: '1rem' }}>
          {images.map((item) => (
            <a 
              href={item.slika} 
              target="_blank" 
              rel="noopener noreferrer" 
              key={item.id}
              style={{ display: 'block', borderRadius: '8px', overflow: 'hidden', border: '1px solid #333' }}
            >
              <img 
                src={item.slika} 
                alt={item.opis || 'Foto dokumentacija'} 
                style={{ width: '100%', height: '150px', objectFit: 'cover' }}
              />
            </a>
          ))}
        </div>
      )}
    </div>
  );
}