'use client'
/* 
  This is the varieties of homes component for the home page.
   - Fetch the property list from the API
   - Display the property list in the slider
   - Use the FullScreenSlider component to display the property list
*/
import { AppDispatch } from "@/redux/store";
import { getPropertyList } from "@/redux/thunks/Property/property.thunk";
import { VarietiesOfHomes as VarietiesOfHomesProp } from "@/src/types/StaticContent/home.content.type";
import dynamic from "next/dynamic";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import styles from "./VarietiesOfHomes.module.scss";

// Define the static content type for the VarietiesOfHomes component
interface VarietiesOfHomesProps {
  VarietiesOfHomes: VarietiesOfHomesProp;
}

// Import the FullScreenSlider component dynamically to avoid server-side rendering for prevent hydration layout shift issue
const FullScreenSlider = dynamic(() => import("@/src/components/FullScreenSlider"), { ssr: false });

const VarietiesOfHomes: React.FC<VarietiesOfHomesProps> = ({ VarietiesOfHomes }) => {

  // Initialize the dispatch function
  const dispatch = useDispatch<AppDispatch>();

  // Fetch the property list
  useEffect(() => {
    dispatch(getPropertyList({
      page: 1,
      perPage: 4,
    }));
  }, []);


  return (
    <>
      <section className={`${styles.VarietiesOfHomesWrapper} overflow-hidden my-[30px] sm:my-[40px] md:my-[50px] xl:my-[60px] xxxl:my-[70px]`}>
        <div className={`container`}>
          <div className={`flex flex-wrap lg:flex-nowrap items-center justify-between gap-3.5 sm:gap-4 md:gap-5 lg:gap-9 mb-[30px] sm:mb-[40px] md:mb-[50px] xl:mb-[60px] xxxl:mb-[70px]`}>
            <h2 className={`!mb-0 lg:max-w-[500px] xxl:max-w-[540px] xxxl:max-w-[700px]`}>{VarietiesOfHomes.TITLE}</h2>
            <p className={`!mb-0 lg:max-w-[500px] xxl:max-w-[540px] xxxl:max-w-[600px] text-grey475Color fs-18`}>{VarietiesOfHomes.DESCRIPTION}</p>
          </div>

          {/* Slider Start */}
          <FullScreenSlider VarietiesOfHomes={VarietiesOfHomes} />
          {/* Slider End */}
        </div>
      </section>
    </>
  );
};

export default VarietiesOfHomes;