import React, { useState } from "react";
import ImageGallery from "react-image-gallery";
import Image from "next/image";

const DetailGallery = () => {
  const [showInfo, setShowInfo] = useState(false);

  const handleMouseEnter = () => {
    setShowInfo(true);
  };

  const handleMouseLeave = () => {
    setShowInfo(false);
  };
  const images = [
    {
      original: "/images/product-gallery/01.png",
      thumbnail: "/images/product-gallery/01.png"
    },
    {
      original: "/images/product-gallery/01.png",
      thumbnail: "/images/product-gallery/01.png"
    },
    {
      original: "/images/product-gallery/01.png",
      thumbnail: "/images/product-gallery/01.png"
    },
    {
      original: "/images/product-gallery/01.png",
      thumbnail: "/images/product-gallery/01.png"
    },
    {
      original: "/images/product-gallery/01.png",
      thumbnail: "/images/product-gallery/01.png"
    },
    {
      original: "/images/product-gallery/01.png",
      thumbnail: "/images/product-gallery/01.png"
    }
  ];
  return (
    <>
      <div className="product-info hide-on-desktop">
        <div className="">
          <div className="top-row">
            <div className="most-booked">Most Booked</div>
            <div className="wishlist-share">
              <a href="#" className="add-to-wishlist">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist-01.svg" />
                </span>
              </a>
              <a href="#" className="add-to-forwardt">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
                </span>
              </a>
            </div>
          </div>
          <div className="product-name">Edge City Climb</div>
        </div>
      </div>
      <div className="product-gallery">
        <div className="row">
          <div className="col-12">
            <div className="product-gallery-item">
              <ImageGallery showNav={false} showPlayButton={false} items={images} />
            </div>
          </div>
        </div>
        <div className="row hide-on-mobile">
          <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>
                Month: All
              </li>
              <li>
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
                </span>
                Time: 9:45 AM - 10:00 AM
              </li>
              <li>
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
                </span>
                Duration: 2-3 Hours
              </li>
              <li>
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
                </span>
                Contact: 1(332) 204-8500
              </li>
              <li>
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
                </span>
                Date: All
              </li>
              <li>
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
                </span>
                Age: 13+
                <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>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
};

export default DetailGallery;