import { Empty, Modal } from "antd"
import Image from "next/image"
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}>
                                <Image 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