"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import Card from "./plan-card/card";
import Preloader from "./preloader";
import { useEffect, useState } from "react";
import { cn } from "clsx-tailwind-merge";
import { setDynamicColumnHeight } from "@/utils/helpers";
import { TPlan } from "@/types";

type PlanesSliderProps = {
  plans: TPlan[];
};

const PlanesSlider = ({ plans }: PlanesSliderProps) => {
  console.log("20/12/2024");
  const [swiperReady, setSwiperReady] = useState(false);
  useEffect(() => {
    const resizeColumn = () => setDynamicColumnHeight(".card-features");
    resizeColumn();
    window.addEventListener("resize", resizeColumn);
    return () => window.removeEventListener("resize", resizeColumn);
  }, []);
  return (
    <div className="pr-[5%] lg:pr-0 relative">
      {!swiperReady && (
        <Preloader className="text-light-blue opacity-50 absolute top-1/2 left-1/2 -translate-x-1/2 w-20 h-20" />
      )}
      <Swiper
        spaceBetween={16}
        slidesPerView={1.2}
        breakpoints={{
          600: {
            slidesPerView: 2.2,
          },
          900: {
            slidesPerView: 3.2,
          },
          1024: {
            spaceBetween: 24,
            slidesPerView: 4,
          },
        }}
        resistanceRatio={0}
        onSwiper={() => setSwiperReady(true)}
        className={cn(
          "[&>.swiper-wrapper]:pl-[5%] !pr-[2.5%] lg:!pr-0 ![overflow:initial] lg:[&>.swiper-wrapper]:pl-0",
          { "opacity-0": !swiperReady }
        )}
      >
        {plans.map((plan) => (
          <SwiperSlide key={plan.name}>
            <Card {...plan} />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default PlanesSlider;