"use client";
/* 
  This is the full screen slider component.
  It contains the following components:
  - HomeVarietiesCard
*/
import { RootState } from "@/redux/slices";
import { VarietiesOfHomes } from "@/src/types/StaticContent/home.content.type";
import { useSelector } from "react-redux";
import "swiper/css";
import "swiper/css/navigation";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import HomeVarietiesCard from "../HomeVarietiesCard";
import styles from "./FullScreenSlider.module.scss";


const FullScreenSlider = ({ VarietiesOfHomes }: { VarietiesOfHomes: VarietiesOfHomes }) => {

  const { propertyList, isLoading } = useSelector((state: RootState) => state.property);

  return (
    <>
      <section className={`${styles.FullScreenSliderWrapper} mt-[30px] sm:mt-[40px] lg:mt-[50px] xxl:mt-[65px]`}>
        <div className={`FullScreenSliderWrap relative`}>
          {/* Slider Wrapper Start */}
          <Swiper
            modules={[Navigation, Pagination, Autoplay]}
            spaceBetween={35}
            navigation={true}
            pagination={{ clickable: true }}
            // autoplay={{ delay: 3000 }}
            autoplay={false}
            loop={false}
            className={`${styles.SwiperSliderWrap} swiper-slider`}
            breakpoints={{
              500: { slidesPerView: 1, spaceBetween: 15 }, // For small screens (phones)
              768: { slidesPerView: 2 }, // For tablets
              992: { slidesPerView: 2 }, // For desktops
              1200: { slidesPerView: 3, spaceBetween: 20 }, // For desktops
              1440: { slidesPerView: 3, spaceBetween: 25 }, // For larger screens
              1620: { slidesPerView: 3, spaceBetween: 35 }, // For larger screens
            }}
          >
            {propertyList?.data?.map((swiperData: any, index: number) => {
              return (
                <SwiperSlide className="relative" key={index}>
                  {/* The home varieties card component is mapped to the component */}
                  <HomeVarietiesCard
                    mainContent={swiperData}
                    propertyImages={[swiperData?.workspaceImage, ...(swiperData?.propertyImage || [])]}
                    VarietiesOfHomes={VarietiesOfHomes}
                  />
                </SwiperSlide>
              );
            })}
          </Swiper>
          {/* Slider Wrapper Start */}
        </div>
      </section>
    </>
  );
};

export default FullScreenSlider;