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

const DetailGallery = ({ activityById }) => {
 


  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>
    </>
  );
};

export default DetailGallery;