Untitled

import Container from "@/components/atoms/Container";
import React from "react";

import styles from "./imageslider.module.scss";
import StandardCardBody from "@/components/molecules/StandardCardBody";
import SwiperCard from "@/components/molecules/SwiperCard";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { useCallback } from "react";
import { useState } from "react";

const ImageSlider = ({ data }) => {
  const sliderRef = React.createRef(null);
  const navigationPrevRef = React.useRef(null);
  const navigationNextRef = React.useRef(null);

  const [slideIndex, setSlideIndex] = useState({ index: 0 });

  const handlePrev = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slidePrev();
    setSlideIndex((prev) => {
      return { index: prev.index >= 1 ? prev.index - 1 : 0 };
    });
  }, []);

  const handleNext = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slideNext();
    setSlideIndex((prev) => {
      return { index: prev.index >= data.slides.length ? slideIndex.index : prev.index + 1 };
    });
  }, []);

  return (
    <Container type="content" className={styles.component}>
      <div className={styles.navigation}>
        <div className={styles.current_slide}>
          {slideIndex.index} Of {data.slides.length}
        </div>
      </div>
      <div className="swiper-image-slider component">
        <Swiper
          ref={sliderRef}
          navigation={{
            prevEl: navigationPrevRef.current,
            nextEl: navigationNextRef.current,
          }}
          onBeforeInit={(swiper) => {
            swiper.params.navigation.prevEl = navigationPrevRef.current;
            swiper.params.navigation.nextEl = navigationNextRef.current;
          }}
        >
          {data &&
            data.slides?.map((slide, index) => (
              <SwiperSlide>
                <div className={styles.component_slide} key={index}>
                  <SwiperCard
                    image={slide.image}
                    type={slide.image.type}
                    canHover={slide.image.hover}
                    body={
                      <StandardCardBody
                        tag={slide.body.category}
                        title={slide.body.title}
                        description={slide.body.author}
                      />
                    }
                  />
                </div>
              </SwiperSlide>
            ))}
          <div className="swiper-image-button-prev" onClick={handlePrev} />
          <div className="swiper-image-button-next" onClick={handleNext} />
        </Swiper>
      </div>
    </Container>
  );
};

export default ImageSlider;