import { Empty, Modal } from "antd";
import { cleanImage } from "../../services/imageHandling.js";
const ActivityDetailGallaryModal = ({ activityDetailInfo }) => {
  return (
    <>
      {activityDetailInfo[0].attributes.imagesComponent.length > 0 ? (
        <div className="p-4">
          <div className="row">
            {activityDetailInfo[0].attributes.imagesComponent.map((data, index) => (
              <div className="col-4" key={index}>
                <img className="img-fluid" height={400} width={400} alt="" src={cleanImage(data.image.data?.attributes)} />
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="d-flex align-items-center justify-content-center" style={{ height: "60vh" }}>
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </div>
      )}
    </>
  );
};

export default ActivityDetailGallaryModal;