gabrielkaszewski-next/components/photo-gallery.tsx

"use client";

import Image from "next/image";
import { Photo } from "@/lib/types";
import { useState, useEffect, useCallback, useRef } from "react";
import { X, ChevronLeft, ChevronRight } from "lucide-react";

const PhotoGallery = ({ photos }: { photos: Photo[] }) => {
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const touchStart = useRef<number | null>(null);

  const selected = selectedIndex !== null ? photos[selectedIndex] : null;

  const close = useCallback(() => setSelectedIndex(null), []);

  const prev = useCallback(() => {
    setSelectedIndex((i) => (i !== null && i > 0 ? i - 1 : i));
  }, []);

  const next = useCallback(() => {
    setSelectedIndex((i) =>
      i !== null && i < photos.length - 1 ? i + 1 : i
    );
  }, [photos.length]);

  useEffect(() => {
    if (selectedIndex === null) return;

    document.body.style.overflow = "hidden";

    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };

    window.addEventListener("keydown", handleKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", handleKey);
    };
  }, [selectedIndex, close, prev, next]);

  const handleTouchStart = (e: React.TouchEvent) => {
    touchStart.current = e.touches[0].clientX;
  };

  const handleTouchEnd = (e: React.TouchEvent) => {
    if (touchStart.current === null) return;
    const diff = e.changedTouches[0].clientX - touchStart.current;
    if (Math.abs(diff) > 50) {
      if (diff > 0) prev();
      else next();
    }
    touchStart.current = null;
  };

  return (
    <>
      <div className="columns-2 md:columns-3 gap-4 w-full max-w-4xl">
        {photos.map((photo, i) => (
          <button
            key={photo.src}
            onClick={() => setSelectedIndex(i)}
            className="mb-4 w-full block cursor-zoom-in"
          >
            <Image
              src={photo.src}
              alt={photo.alt}
              width={photo.width}
              height={photo.height}
              className="w-full h-auto rounded-lg hover:opacity-80 transition-opacity"
            />
          </button>
        ))}
      </div>

      {selected && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Photo lightbox"
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/95"
          onTouchStart={handleTouchStart}
          onTouchEnd={handleTouchEnd}
        >
          <button
            onClick={close}
            aria-label="Close lightbox"
            className="absolute top-4 right-4 z-10 text-white/70 hover:text-white p-2"
          >
            <X size={28} />
          </button>

          {selectedIndex! > 0 && (
            <button
              onClick={prev}
              aria-label="Previous photo"
              className="absolute left-2 md:left-4 z-10 text-white/50 hover:text-white p-2"
            >
              <ChevronLeft size={32} />
            </button>
          )}

          {selectedIndex! < photos.length - 1 && (
            <button
              onClick={next}
              aria-label="Next photo"
              className="absolute right-2 md:right-4 z-10 text-white/50 hover:text-white p-2"
            >
              <ChevronRight size={32} />
            </button>
          )}

          <button onClick={close} aria-label="Close lightbox" className="contents">
            <Image
              src={selected.src}
              alt={selected.alt}
              width={selected.width}
              height={selected.height}
              className="max-w-[92vw] max-h-[85vh] w-auto h-auto object-contain cursor-zoom-out"
            />
          </button>

          <div className="absolute bottom-4 text-white/40 text-sm">
            {selectedIndex! + 1} / {photos.length}
          </div>
        </div>
      )}
    </>
  );
};

export default PhotoGallery;