import Image from "next/image"; import React, { Fragment } from "react"; import { Button } from "react-bootstrap"; import { cleanImage } from "../../services/imageHandling"; import WishlistComponent from "../detail/WIshlistComponent"; import { useRouter } from "next/router"; import { useSelector } from "react-redux"; const MyWhishList = ({ data }) => { const router = useRouter(); const { endUser } = useSelector(state => state.endUser); console.log("checking end user", endUser); return ( <Fragment> <div className="container pb-5" style={{ minHeight: '30vw' }}> <div className="row"> <div className="col-12 col-lg-12 form-container content-wraaper"> <h2 className="px-2 px-lg-0">My Wishlist</h2> {endUser === null || endUser === undefined || endUser === "" ? ( <h1>You need to login first!</h1> ) : ( <div className="listing-items"> <div className="row"> {data?.length > 0 ? ( <> {data.map((data, index) => ( <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}> <div className="item"> <div className="browse-experiences-item"> <div className="img-wrapper"> <span className="image-container"> <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" /> </span> {/* <div className="top-rated">Top Rated</div> */} </div> <div className="info"> <div className="top-name"> <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div> <div className="rating-wishlist"> {/* <div className="rating"> <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> </span> </div> */} <WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} /> </div> </div> <div className="discription"> <p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p> </div> <div className="price"> ${data?.attributes?.experience?.data?.attributes?.pricePerPerson} {/* <span className="off">{}% OFF</span> */} </div> <div className="detail"> {/* <div className="">For 1 Night</div> */} <div className="">Includes taxes & Fees</div> </div> <div className="explore-now"> <Button variant="primary" onClick={() => { router.push(`/activities/${data?.attributes?.experience?.data?.id}`); }} > Explore Now </Button> </div> </div> </div> </div> </div> ))} </> ) : ( <> <p>No Item Found</p> </> )} </div> </div> )} </div> </div> </div> </Fragment> ); }; export default MyWhishList;