"use client";
import { Swiper, SwiperSlide, SwiperRef } from "swiper/react";
import { useRef } from "react";
import NavigationButton from "@/modules/ui/navigation-button";
import { Navigation } from "swiper/modules";
import Image from "next/image";

type StepCardProps = {
  url: string;
  title: string;
  description: string;
};

type SwiperComponentProps = {
  data: StepCardProps[];
};

const StepCard: React.FC<StepCardProps> = ({ url, title, description }) => (
  <div
    className={`bg-primary/25 flex items-center justify-between rounded-[18px] h-[160px] shadow-[0px_1px_8px_0px_rgba(0,0,0,0.1)]`}
  >
    <div className="m-[18px] w-2/12">
      <Image
        src={url}
        width={64}
        height={64}
        className="!h-[64px]"
        alt="step-icon"
      />
    </div>
    <div className="bg-white h-full rounded-[18px] p-[15px] w-10/12">
      <p className="text-[15px] md:text-[20px] leading-[30px] font-semibold text-[rgba(0,0,0,0.87)]">
        {title}
      </p>
      <p className="text-[13px] mt-[8px] leading-[20px] text-[rgba(0,0,0,0.54)] line-clamp-4">
        {description}
      </p>
    </div>
  </div>
);
export default function Page(props: SwiperComponentProps) {
  const { data } = props;
  const swiperRef = useRef<SwiperRef | null>(null);

  const handleNext = () => {
    if (swiperRef.current) {
      swiperRef.current.swiper.slideNext();
    }
  };

  const handlePrev = () => {
    if (swiperRef.current) {
      swiperRef.current.swiper.slidePrev();
    }
  };
  return (
    <div className="relative">
      <Swiper
        ref={swiperRef}
        spaceBetween={24}
        slidesPerView={4}
        breakpoints={{
          0: {
            slidesPerView: 1.3,
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          500: {
            slidesPerView: 1.5,
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          640: {
            slidesPerView: 2, // 1 slide at a time for mobile
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          768: {
            slidesPerView: 2.5, // 2 slides at a time for tablets
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 24,
          },
        }}
        className="!p-1"
        id="awesome-features"
        modules={[Navigation]}
        navigation={{
          nextEl: ".awesome-features-button-next",
          prevEl: ".awesome-features-button-prev",
          disabledClass: "swiper-button-disabled",
        }}
      >
        {data.map((item, i) => (
          <SwiperSlide key={i}>
            <StepCard
              key={i}
              url={item.url}
              title={item.title}
              description={item.description}
            />
          </SwiperSlide>
        ))}
      </Swiper>
      <NavigationButton
        className="absolute z-10 top-[40%] left-[-12px] awesome-features-button-prev"
        onClick={handlePrev}
      />
      <NavigationButton
        className="rotate-180 absolute z-10 top-[40%] right-[-12px] awesome-features-button-next"
        onClick={handleNext}
      />
    </div>
  );
}