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={(e) => {
                          e.stopPropagation();
                          console.log('Клик по кнопке редактирования:', image);
                          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>
  );
}