import React, { useState } from "react";
import "./ImagePreviewstyle.css";
import GlobalModel from "./GlobalModel";

const ImagePreview = ({ images = [], IsReported = false }) => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleOpen = (imgSrc) => {
    setSelectedImage(imgSrc);
  };

  const handleClose = () => {
    setSelectedImage(null);
  };

  return (
    <>
      {IsReported ? (
        <div className="d-flex flex-wrap gap-2">
          {images.map((img, index) => (
            <div
              key={index}
              className="img-container position-relative"
              onClick={() => handleOpen(img)}
            >
              <img src={img} alt={`thumb-${index}`} className="img-thumbnail" />

              <div className="eye-overlay d-flex justify-content-center align-items-center">
                <i className="fa-solid fa-eye fs-6"></i>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="d-flex flex-wrap gap-2">
          {images.map((img, index) => (
            <div key={index} className="" onClick={() => handleOpen(img)}>
              {/* <img src={img} alt={`thumb-${ index }`} className="img-thumbnail" /> */}
              <i className="fa-regular fa-image fs-3 cursor-pointer"></i>
            </div>
          ))}
        </div>
      )}

      {selectedImage && (
        <GlobalModel
          isOpen={selectedImage}
          size="md"
          dialogClass="modal-dialog-centered"
          closeModal={() => setSelectedImage(null)}
        >
          <div className="mt-3 img-preview" >
            <img
              src={selectedImage}
              alt="Previe Image"
              className="w-100"
             
            />
          </div>
        </GlobalModel>
      )}
    </>
  );
};

export default ImagePreview;