---
import type { Photo } from '../data/photos';

interface Props {
  photos: Photo[];
  showAll?: boolean;
}

const { photos, showAll = true } = Astro.props;
---

<div class="gallery-grid" id="gallery-grid">
  {photos.map((photo) => (
    <div
      class="lightbox-trigger aspect-[4/3] overflow-hidden bg-gray-100"
      data-lightbox-src={photo.src}
      data-lightbox-caption={photo.caption || photo.alt}
      tabindex="0"
      role="button"
      aria-label={`View photo: ${photo.alt}`}
      onkeydown="if(event.key==='Enter'||event.key===' '){this.click();event.preventDefault();}"
    >
      <img
        src={photo.src}
        alt={photo.alt}
        width={photo.width}
        height={photo.height}
        loading="lazy"
        decoding="async"
        class="w-full h-full object-cover"
      />
    </div>
  ))}
</div>
