type GalleryPhoto = {

  id: string;

  url: string;

  caption: string | null;

};

export function PhotoGallery({ photos }: { photos: GalleryPhoto[] }) {

  return (

    <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3">

      {photos.map((p) => (

        <li key={p.id}>

          <details className="group">

            <summary className="block cursor-pointer list-none [&::-webkit-details-marker]:hidden">

              <img

                src={p.url}

                alt={p.caption ?? "Event photo"}

                loading="lazy"

                className="aspect-square w-full border border-[var(--line)] object-cover transition-opacity hover:opacity-80"

              />

              <span

                aria-hidden

                className="fixed inset-0 z-40 hidden bg-black/90 group-open:block"

              />

            </summary>

            <div className="pointer-events-none fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 p-6">

              <img

                src={p.url}

                alt={p.caption ?? "Event photo"}

                className="max-h-[80vh] max-w-full border border-[var(--line)] object-contain"

              />

              {p.caption ? (

                <p className="serif max-w-xl text-center text-lg text-bone">{p.caption}</p>

              ) : null}

              <p className="kicker text-ash">Click anywhere to close</p>

            </div>

          </details>

        </li>

      ))}

    </ul>

  );

}