import React, { useState } from "react";
import "./swiper.style.scss";
import Inflid from "../../assets/images/main/projects/inflid_full_1.png";
import CustomPC from "../../assets/images/main/projects/custom-pc4u.png";
import Mockba from "../../assets/images/main/projects/mockba-modular.png";
import Pryatki from "../../assets/images/main/projects/pryatki.png";
import Sizzapp from "../../assets/images/main/projects/sizzapp.png";
import Trackpro from "../../assets/images/main/projects/trackpro.png";
import BrowserWrap from "../../assets/images/main/projects/browser-window.png";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-coverflow";
import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
import { Autoplay } from "swiper";
SwiperCore.use([EffectCoverflow, Pagination]);

const ProjectsSwiper = () => {
  const [activeSlide, setSlide] = useState("");

  return (
    <Swiper
      loop={true}
      autoplay={{
        delay: 2500,
        disableOnInteraction: true,
      }}
      speed={1200}
      effect={"coverflow"}
      coverflowEffect={{
        scale: 1,
        rotate: 0,
        stretch: 100,
        depth: 500,
        modifier: 1,
        slideShadows: false,
      }}
      centeredSlides={true}
      slideToClickedSlide={true}
      onSlideChange={(swiper) => {
        setSlide(swiper.realIndex);
      }}
      breakpoints={{
        0: {
          slidesPerView: 1,
        },
        1200: {
          slidesPerView: 2,
        },
      }}
      onSwiper={(swiper) => {
        console.log(swiper);
      }}
      modules={[Autoplay]}
      id={`active-slide-${activeSlide}`}
    >
      <SwiperSlide id="project-slide-1">
        <h2>Inflid</h2>
        <div className="img-wrap">
          <img src={Inflid} alt="inflid" />
        </div>
        <div className="project-info">
          <div>
            <p>Website</p>
            <p>Platform</p>
            <p>UI / UX</p>
          </div>
          <p>Smart matching platform for Streamers and Advertisers</p>
        </div>
      </SwiperSlide>
      <SwiperSlide id="project-slide-2">
        <h2>Custom PC4U</h2>
        <div className="img-wrap">
          <img src={CustomPC} alt="inflid" />
        </div>
        <div className="project-info">
          <div>
            <p>Website</p>
            <p>Platform</p>
            <p>UI / UX</p>
          </div>
          <p>Smart matching platform for Streamers and Advertisers</p>
        </div>
      </SwiperSlide>
      <SwiperSlide id="project-slide-3">
        <h2>MOCKBA MODULAR</h2>
        <div className="img-wrap">
          <img src={Mockba} alt="inflid" />
        </div>
        <div className="project-info">
          <div>
            <p>Website</p>
            <p>Platform</p>
            <p>UI / UX</p>
          </div>
          <p>Smart matching platform for Streamers and Advertisers</p>
        </div>
      </SwiperSlide>
      <SwiperSlide id="project-slide-4">
        <h2>PRIYATKI</h2>
        <div className="img-wrap">
          <img src={Pryatki} alt="inflid" />
        </div>
        <div className="project-info">
          <div>
            <p>Website</p>
            <p>E-shop</p>
            <p>CMS</p>
          </div>
          <p>Smart matching platform for Streamers and Advertisers</p>
        </div>
      </SwiperSlide>
      <SwiperSlide id="project-slide-5">
        <h2>SIZZAPP</h2>
        <div className="img-wrap">
          <img src={Sizzapp} alt="inflid" />
        </div>
        <div className="project-info">
          <div>
            <p>Website</p>
            <p>Landing</p>
            <p>UI/UX</p>
          </div>
          <p>Smart matching platform for Streamers and Advertisers</p>
        </div>
      </SwiperSlide>
      <SwiperSlide id="project-slide-6">
        <h2>TrackPro</h2>
        <div className="img-wrap">
          <img src={Trackpro} alt="inflid" />
        </div>
        <div className="project-info">
          <div>
            <p>Website</p>
            <p>CMS</p>
          </div>
          <p>Smart matching platform for Streamers and Advertisers</p>
        </div>
      </SwiperSlide>
    </Swiper>
  );
};

export default ProjectsSwiper;
