import Image from "next/image";
import { Fragment } from "react"
import { Button, Modal } from "react-bootstrap";

const ActivityDetailsModal = ({ show, handleClose }) => {
    return (
        <Fragment>
            <Modal show={show} onHide={handleClose} size="xl" aria-labelledby="contained-modal-title-vcenter"
                centered>
                <Modal.Body>
                    <div className="vendorDetails">
                        <div className="row">
                            <div className="col-12 col-lg-12">
                            <div className="d-flex align-items-center justify-content-between mb-4">
                            <h4 className="mb-0">Activity Details</h4>
                            <span className="image-container" style={{ cursor: "pointer" }} onClick={handleClose}>
                                <Image width={13} height={13} alt="" src="/images/admin/icon-close.svg" className="image" />
                            </span>
                        </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-12 col-lg-4 borderRight">
                                <p className="phead">Basic Details</p>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Category</p>
                                    <p className="col-12 col-lg-6">Adventure</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">SubCategory</p>
                                    <p className="col-12 col-lg-6">Rooftop</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Activity Name</p>
                                    <p className="col-12 col-lg-6">Edge City Climb</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Activity Description</p>
                                    <p className="col-12 col-lg-6 pview">View</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Location</p>
                                    <p className="col-12 col-lg-6">Chelsea</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Address</p>
                                    <p className="col-12 col-lg-6">30 Hudson Yards, New York, NY 10001</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Activity Name</p>
                                    <p className="col-12 col-lg-6">Edge City Climb</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Price (per person)</p>
                                    <p className="col-12 col-lg-6">$185</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Tags</p>
                                    <p className="col-12 col-lg-6"></p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Place</p>
                                    <p className="col-12 col-lg-6">Outdoor</p>
                                </div>
                                <div className="row">
                                    <p className="col-12 col-lg-6">Gifting to someone</p>
                                    <p className="col-12 col-lg-6">Disallowed</p>
                                </div>
                            </div>
                            <div className="col-12 col-lg-4 borderRight ps-4">
                                <div>
                                    <p className="phead">Group Information</p>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Contact Person for the activity</p>
                                        <p className="col-12 col-lg-6">Arnav</p>
                                    </div>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Size of the Group</p>
                                        <p className="col-12 col-lg-6">2</p>
                                    </div>
                                </div>
                                <div>
                                    <p className="phead">Availability</p>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Months</p>
                                        <p className="col-12 col-lg-6">February</p>
                                    </div>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Time</p>
                                        <p className="col-12 col-lg-6">9:45am-10:00pm</p>
                                    </div>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Duration</p>
                                        <p className="col-12 col-lg-6">2-3 hours</p>
                                    </div>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Age Group</p>
                                        <p className="col-12 col-lg-6">13+</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-12 col-lg-4 ps-4">
                                <div>
                                    <p className="phead">Booking & Activity Information</p>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Link of Booking</p>
                                        <p className="col-12 col-lg-6 pview">https://www.zango.com</p>
                                    </div>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Images of Activities</p>
                                        <p className="col-12 col-lg-6 pview">View Images</p>
                                    </div>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Brand Logo</p>
                                        <p className="col-12 col-lg-6 pview">View Logo</p>
                                    </div>
                                </div>
                                <div>
                                    <p className="phead">Policy & Terms</p>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Cancellation Policy</p>
                                        <p className="col-12 col-lg-6 pview">View</p>
                                    </div>
                                    <div className="row">
                                        <p className="col-12 col-lg-6">Terms & Conditions</p>
                                        <p className="col-12 col-lg-6 pview">View</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-12 col-lg-12">
                                <div className="d-flex justify-content-center">
                                    <Button variant="" className="btnAdd btnApprove m-0" onClick={handleClose}>
                                        Approve
                                    </Button>
                                    <div className="px-1"></div>
                                    <Button variant="" className="btnAdd btnReject m-0" onClick={handleClose}>
                                        Reject
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </Modal.Body>
            </Modal>
        </Fragment>
    )
}
export default ActivityDetailsModal;