import Image from "next/image"; import React, { useState } from "react"; const DetailSchedule = ({ activityById }) => { const [showInfo, setShowInfo] = useState(false); const handleMouseEnter = () => { setShowInfo(true); }; const handleMouseLeave = () => { setShowInfo(false); }; const returnAvilablleDaysArray = ({ data }) => { let array = []; if (data.attributes.availableOnMonday) { array = [...array, { name: "Monday", value: "monday" }]; } if (data.attributes.availableOnTuesday) { array = [...array, { name: "Tuesday", value: "tuesday" }]; } if (data.attributes.availableOnWednesday) { array = [...array, { name: "Wednesday", value: "wednesday" }]; } if (data.attributes.availableOnThursday) { array = [...array, { name: "Thursday", value: "thursday" }]; } if (data.attributes.availableOnFriday) { array = [...array, { name: "Friday", value: "friday" }]; } if (data.attributes.availableOnSaturday) { array = [...array, { name: "Saturday", value: "saturday" }]; } if (data.attributes.availableOnSunday) { array = [...array, { name: "Sunday", value: "sunday" }]; } return array; }; return ( <div className="row mb-5"> {activityById && ( <div className="col-12"> <ul className="availability-wrappper"> <li> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" /> </span> From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate} </li> {/* <li> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" /> </span> Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime} </li> */} <li> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" /> </span> Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Mins </li> <li> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" /> </span> Contact: {activityById.data.attributes.phoneNumber} </li> <li> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" /> </span> Active on:{" "} {returnAvilablleDaysArray({ data: activityById.data }) .map(item => { return item.name; }) .join(", ")} </li> <li> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" /> </span> Age: {activityById.data.attributes.ageLowerLimit}+ <div className="info-div"> <a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" /> </a> {showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>} </div> </li> <li> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" /> </span> Activity type: {activityById.data.attributes.activityType} </li> </ul> </div> )} </div> ); }; export default DetailSchedule;