"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import Image from "next/image";
import Title from "../title";
import SliderCard from "../cards/sliderCard";

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

const data = [
  {
    id: 1,
    image: "/images/yuklagich.jpg",
    title: "Old Yuklagich",
    text: "Yangi yuklagich siz uchun eng yaxshi texnika!",
    path: "",
  },
  {
    id: 2,
    image: "/images/kompressor.jpg",
    title: "Kompressor",
    text: "Yangi kompressorlar to'plami aynan siz uchun",
    path: "",
  },
  {
    id: 3,
    image: "/images/avtokran.jpg",
    title: "Avtokran",
    text: "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi.",
    path: "",
  },
];

export default function CustomSlider() {
  return (
    <div dir="ltr" className="w-full relative">
      {/* Title */}
      <div className="my-10 mb-20 flex items-center justify-between">
        <Title text="news-h2" />
      </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 },
        }}
      >
        {data.map((item, index) => (
          <SwiperSlide key={index}>
            <SliderCard data={item} />
          </SwiperSlide>
        ))}
      </Swiper>

      {/* Custom buttons */}
      <div className="absolute top-1/2 right-4 flex gap-2 -translate-y-1/2">
        <button
          className={`${navigationPrevEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
        >
          ‹
        </button>
        <button
          className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
        >
          ›
        </button>
      </div>
    </div>
  );
}