"use client";
import { A11y } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { plansHome } from "@/data/plans-homepage";
import { OurPlansCard } from "@/components/homepage";
import { Plan } from "@/components/planes/types";

type OurPlansSliderProps = {
  plans: Plan[];
};

const OurPlansSlider = ({ plans }: OurPlansSliderProps) => {
  return (
    <div className="pt-5">
      <Swiper
        modules={[A11y]}
        spaceBetween={8}
        slidesPerView={1.1}
        pagination={{ clickable: true }}
        className="px-[5%]!"
        resistanceRatio={0}
        breakpoints={{ 600: { slidesPerView: 2.1 } }}
      >
        {plansHome
          .map((plan) => {
            const { animateValues, ...rest } = plan;
            return { ...rest };
          })
          .map((plan, i) => (
            <SwiperSlide key={i}>
              <OurPlansCard
                {...{
                  ...plan,
                  titulo: plans[i].titulo,
                  price: plans[i].precio,
                  priceDiscount: plans[i].precio_descuento,
                }}
              />
            </SwiperSlide>
          ))}
      </Swiper>
    </div>
  );
};

export default OurPlansSlider;