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";

const Slider = ({ data }) => {
  const navigationPrevRef = React.useRef(null);
  const navigationNextRef = React.useRef(null);
  console.log("slider data::", data.eventDetails);

  return (
    <div className={`swiper-standard-slider ${styles.component}`}>
      <div className={styles.component_topbar}>
        <div className={styles.component_topbar_title}>{data && data?.title}</div>

      <Swiper
        modules={[Navigation]}
        slidesPerView={"auto"}
        draggable
        navigation={{
          prevEl: navigationPrevRef.current,
          nextEl: navigationNextRef.current,
        }}
        onBeforeInit={(swiper) => {
          swiper.params.navigation.prevEl = navigationPrevRef.current;
          swiper.params.navigation.nextEl = navigationNextRef.current;
        }}
      >
        {data &&
          data.eventDetails?.map((slide, index) => (
            <SwiperSlide className={slide?.image?.landscape ? "swiper-slide_landscape" : "swiper-slide"} key={index}>
              <Card
                image={slide?.image}
                body={<StandardCardBody title={slide?.title} author={slide?.author?.rendered} />}
                className={slide?.image?.landscape ? styles.slide_landscape : styles.slide}
              />
            </SwiperSlide>
          ))}
      </Swiper>
    </div>
  );
};

export default Slider;