'use client';

import { useState } from 'react';
import Image from 'next/image';
import type { Artwork } from '@/lib/data/artworks';

interface LightboxGalleryProps {
  artworks: Artwork[];
}

export default function LightboxGallery({ artworks }: LightboxGalleryProps) {
  const [selectedArtwork, setSelectedArtwork] = useState<Artwork | null>(null);

  return (
    <>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {artworks.map((artwork, index) => (
          <div
            key={index}
            className="relative aspect-square rounded-lg overflow-hidden group cursor-pointer"
            onClick={() => setSelectedArtwork(artwork)}
          >
            <Image
              src={artwork.src}
              alt={artwork.title}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-110"
            />
            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-300 flex items-end justify-center pb-4">
              <span className="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 font-sans-alt text-xs tracking-widest">
                {artwork.title}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* Lightbox Modal */}
      {selectedArtwork && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 md:p-8"
          onClick={() => setSelectedArtwork(null)}
        >
          <button
            className="absolute top-4 right-4 md:top-6 md:right-6 z-50 text-white/70 hover:text-white transition-colors p-2"
            onClick={() => setSelectedArtwork(null)}
            aria-label="Close"
          >
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </button>
          <div className="relative w-full h-full max-w-6xl max-h-[85vh] flex flex-col items-center justify-center">
            <div
              className="relative w-full flex-1 min-h-0"
              onClick={(e) => e.stopPropagation()}
            >
              <Image
                src={selectedArtwork.src}
                alt={selectedArtwork.title}
                fill
                className="object-contain"
                sizes="(max-width: 768px) 100vw, 90vw"
              />
            </div>
            <p
              className="text-white/80 font-sans-alt text-sm tracking-widest mt-4 text-center"
              onClick={(e) => e.stopPropagation()}
            >
              {selectedArtwork.title}
            </p>
          </div>
        </div>
      )}
    </>
  );
}
