import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface ImagePreviewProps {
  thumbnailSrc: string;
  fullSrc: string;
  alt?: string;
}

export const ImagePreview: React.FC<ImagePreviewProps> = ({ thumbnailSrc, fullSrc, alt }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
      <>
        {/* Миниатюра */}
        <motion.img
            src={thumbnailSrc}
            alt={alt || ''}
            className="object-cover cursor-pointer rounded shadow"
            whileHover={{ scale: 1.05 }}
            onError={(e) => {
              (e.target as HTMLImageElement).style.display = 'none';
            }}
            onClick={() => setIsOpen(true)}
        />

        {/* Модалка */}
        <AnimatePresence>
          {isOpen && (
              <motion.div
                  className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"
                  onClick={() => setIsOpen(false)}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
              >
                <motion.img
                    src={fullSrc}
                    alt={alt || ''}
                    className="max-w-[90%] max-h-[90%] rounded shadow-lg"
                    initial={{ scale: 0.5, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    exit={{ scale: 0.5, opacity: 0 }}
                    transition={{ duration: 0.3 }}
                    onClick={(e) => e.stopPropagation()}
                />
              </motion.div>
          )}
        </AnimatePresence>
      </>
  );
};
