Untitled

import React from "react";
import styles from "./slider.module.scss";
import StandardCardBody from "@/components/molecules/StandardCardBody";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import Card from "@/components/molecules/Card";
import { useState } from "react";
import { useCallback } from "react";

const Slider = ({ data }) => {
  const [slideIndex, setSlideIndex] = useState(0);
  const sliderRef = React.useRef(null);

  const handlePrev = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slidePrev();
  }, []);

  const handleNext = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slideNext();
  }, []);

  return (
    <div className={`swiper-standard-slider ${styles.component}`}>
      <div className={styles.component_title}>{data && data?.title}</div>
      <Swiper
        ref={sliderRef}
        modules={[Navigation]}
        slidesPerView={"auto"}
        draggable
        onActiveIndexChange={(i) => setSlideIndex(i.activeIndex)}
      >
        {data &&
          data.slides?.map((slide, index) => (
            <SwiperSlide className={slide?.image?.landscape ? "swiper-slide_landscape" : "swiper-slide"} key={index}>
              <Card
                image={slide.image}
                body={<StandardCardBody content={slide?.body} />}
                className={slide?.image?.landscape ? styles.slide_landscape : styles.slide}
              />
            </SwiperSlide>
          ))}
      </Swiper>
      <div className={`swiper-standard-button-prev ${slideIndex <= 0 && "disabled"}`} onClick={handlePrev} />
      <div className="swiper-standard-button-next" onClick={handleNext} />
    </div>
  );
};

export default Slider;