'use client';

import { useState } from 'react';
import Image from 'next/image';
import Lightbox from 'yet-another-react-lightbox';
import Zoom from 'yet-another-react-lightbox/plugins/zoom';
import "yet-another-react-lightbox/styles.css";
import { getMediaUrl } from '@/lib/api';

export default function PostGallery({ media }: { media: { image_url: string }[] }) {
  const [index, setIndex] = useState(-1);

  if (!media || media.length === 0) {
    return null;
  }

  const slides = media.map((item) => ({
    src: getMediaUrl(item.image_url),
  }));

  return (
    <div className="mt-12">
      <h3 className="text-2xl font-bold mb-6">Galeri</h3>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {media.map((item, i) => (
          <div 
            key={i} 
            className="aspect-square relative cursor-pointer overflow-hidden rounded-lg group"
            onClick={() => setIndex(i)}
          >
            <Image
              src={getMediaUrl(item.image_url)}
              alt={`Gallery Image ${i + 1}`}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-110"
            />
          </div>
        ))}
      </div>

      <Lightbox
        open={index >= 0}
        index={index}
        close={() => setIndex(-1)}
        slides={slides}
        plugins={[Zoom]}
        zoom={{
          maxZoomPixelRatio: 3,
          zoomInMultiplier: 2,
          doubleTapDelay: 300,
          doubleClickDelay: 300,
          doubleClickMaxStops: 2,
          keyboardMoveDistance: 50,
          wheelZoomDistanceFactor: 100,
          pinchZoomDistanceFactor: 100,
          scrollToZoom: false,
        }}
      />
    </div>
  );
}