"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import { DATA } from "@/lib/demoData";

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

export function SliderComp({ imgs }: { imgs: string[] }) {
  return (
    <div>
      <div className="flex items-center justify-center relative">
        <Swiper
          modules={[Navigation]}
          navigation={{
            // Pass the class selectors here
            prevEl: navigationPrevEl,
            nextEl: navigationNextEl,
          }}
          pagination={{ clickable: true }}
          className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
        >
          {imgs.map((image, index) => (
            <SwiperSlide
              key={index}
              className="bg-white flex items-center justify-center"
            >
              <img
                src={image || "/placeholder.svg"}
                alt={`${DATA[0].title} - ${index + 1}`}
                className="w-full h-full object-contain p-4"
              />
            </SwiperSlide>
          ))}
        </Swiper>
        {/* Custom buttons */}
        <button
          className={`${navigationPrevEl.replace(
            ".",
            "",
          )} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center 
          text-white flex items-center justify-center hover:cursor-pointer transition`}
        >
          ‹
        </button>
        <button
          className={`${navigationNextEl.replace(
            ".",
            "",
          )} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
        >
          ›
        </button>
      </div>
    </div>
  );
}