import React from 'react';
import { Move, Pencil, Trash2 } from 'lucide-react';
import { GalleryImage } from '../../types';

interface GalleryGridProps {
  images: GalleryImage[];
  onEdit: (image: GalleryImage) => void;
  onDelete: (id: string) => void;
  onReorder: (dragIndex: number, dropIndex: number) => void;
}

export function GalleryGrid({ images, onEdit, onDelete, onReorder }: GalleryGridProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {images.map((image, index) => (
        <div
          key={image.id}
          className="relative group border rounded-lg overflow-hidden"
          draggable
          onDragStart={(e) => e.dataTransfer.setData('text/plain', index.toString())}
          onDragOver={(e) => e.preventDefault()}
          onDrop={(e) => {
            e.preventDefault();
            const dragIndex = parseInt(e.dataTransfer.getData('text/plain'));
            onReorder(dragIndex, index);
          }}
        >
          <img
            src={image.url}
            alt={image.alt}
            className="w-full h-48 object-cover"
          />
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <div className="flex space-x-2">
                <button
                  onClick={() => onEdit(image)}
                  className="p-2 bg-white rounded-full text-gray-700 hover:text-blue-600"
                >
                  <Pencil size={16} />
                </button>
                <button
                  onClick={() => onDelete(image.id)}
                  className="p-2 bg-white rounded-full text-gray-700 hover:text-red-600"
                >
                  <Trash2 size={16} />
                </button>
                <button className="p-2 bg-white rounded-full text-gray-700 cursor-move">
                  <Move size={16} />
                </button>
              </div>
            </div>
          </div>
          <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm">
            {image.caption}
          </div>
        </div>
      ))}
    </div>
  );
}