"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import Title from "../lib_components/title";
import SliderCard from "../cards/sliderCard";
import { sliderData } from "@/data";

// The custom CSS selectors for navigation
const navigationPrevEl = ".custom-swiper-prev";
const navigationNextEl = ".custom-swiper-next";

export default function CustomSlider() {
  return (
    <div
      dir="ltr"
      className="max-w-[1400px] w-full mx-auto relative my-20 px-4"
    >
      {/* Title */}
      <div className="my-10 mb-20 flex items-center justify-between ">
        <div className="">
          <Title text="news-h2" />
        </div>

        {/* Custom buttons */}
        <div className="flex gap-2 items-center justify-center">
          <button
            className={`${navigationPrevEl.replace(
              ".",
              ""
            )} w-10 h-10  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
          >
            ‹
          </button>
          <button
            className={`${navigationNextEl.replace(
              ".",
              ""
            )} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
          >
            ›
          </button>
        </div>
      </div>

      {/* Swiper */}
      <Swiper
        modules={[Navigation]}
        slidesPerView={3}
        spaceBetween={30}
        loop={true}
        navigation={{
          // Pass the class selectors here
          prevEl: navigationPrevEl,
          nextEl: navigationNextEl,
        }}
        breakpoints={{
          0: { slidesPerView: 1 },
          768: { slidesPerView: 2 },
          1024: { slidesPerView: 3 },
        }}
      >
        {sliderData.map((item, index) => (
          <SwiperSlide key={index}>
            <SliderCard data={item} />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}