import React from 'react';
import { X } from 'lucide-react';
import { GalleryImage } from '../../types';
import { ImageForm } from './ImageForm';

interface EditImageModalProps {
  image: GalleryImage;
  onClose: () => void;
  onSave: (image: GalleryImage) => void;
}

export function EditImageModal({ image, onClose, onSave }: EditImageModalProps) {
  const [editedImage, setEditedImage] = React.useState(image);

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-lg max-w-md w-full p-6">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-medium text-gray-900">Редактирование изображения</h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-500"
          >
            <X size={20} />
          </button>
        </div>
        <ImageForm
          url={editedImage.url}
          caption={editedImage.caption}
          alt={editedImage.alt}
          onUrlChange={(url) => setEditedImage({ ...editedImage, url })}
          onCaptionChange={(caption) => setEditedImage({ ...editedImage, caption })}
          onAltChange={(alt) => setEditedImage({ ...editedImage, alt })}
          onSubmit={() => onSave(editedImage)}
          submitLabel="Save Changes"
        />
      </div>
    </div>
  );
}