import Image from "next/image";
import React from "react";
import {fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Button } from "react-bootstrap";

import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const LetDiscover = () => {
  const letDiscoverData = [
    {
      image: "/images/discover/01.png",
      title: "All"
    },
    {
      image: "/images/discover/02.png",
      title: "Art & History"
    },
    {
      image: "/images/discover/03.png",
      title: "Experiential Dining "
    },
    {
      image: "/images/discover/04.png",
      title: "Family"
    },
    {
      image: "/images/discover/05.png",
      title: "Fitness"
    },
    {
      image: "/images/discover/06.png",
      title: "Performing Arts"
    },
    {
      image: "/images/discover/01.png",
      title: "Pop Ups"
    },
    {
      image: "/images/discover/02.png",
      title: "Tour"
    },
    {
      image: "/images/discover/03.png",
      title: "Classes"
    },
    {
      image: "/images/discover/04.png",
      title: "Wellness"
    }
  ];
  return (
    <>
      <section className="let-discover-session let-discover-listing-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
              {/* <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                your text or div will come here
              </motion.div> */}
              <div className="head-btn">
              <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                <div className="head01">
                  <div className="title">Let’s </div>
                  <h2>Discover</h2>
                </div>
                </motion.div>
          
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <div className="let-discover-carousal position-relative">
                <Swiper
                  slidesPerView={3}
                  autoplay={{
                    delay: 9000,
                    disableOnInteraction: false
                  }}
                  spaceBetween={10}
                  navigation={{ nextEl: ".letdiscover-arrow-left", prevEl: ".letdiscover-arrow-right" }}
                  breakpoints={{
                    640: {
                      slidesPerView: 3,
                      spaceBetween: 20
                    },
                    768: {
                      slidesPerView: 4,
                      spaceBetween: 20
                    },
                    1024: {
                      slidesPerView: 10,
                      spaceBetween: 20
                    }
                  }}
                  modules={[Navigation, Autoplay]}
                  className="mySwiper01 mySwiper02"
                >
                  {letDiscoverData &&
                    letDiscoverData.map((data, index) => {
                      return (
                        <SwiperSlide>
                        <motion.div
                            variants={zoomIn("left", 0.3)}
                            initial={"hidden"}
                            whileInView={"show"}
                            viewport={{ once: false, amount: 0.2 }}
                          >
                          <a href="">
                            <span className="image-container">
                              <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
                            </span>
                            <div className="title">{data.title}</div>
                          </a>
                        </motion.div>
                        </SwiperSlide>
                      );
                    })}
                </Swiper>
                <div className="swiper-nav">
                  <div className="navbutton d-flex justify-content-between ">
                    <button className="letdiscover-arrow-right arrow">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                      </span>
                    </button>
                    <button className="letdiscover-arrow-left arrow">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default LetDiscover;