'use client'
/**
 * @author: Multiqos
 * File: PropertyDetailsList.tsx
 * Description: This file contains the PropertyDetailsList component, which displays a list of property details.
 * It fetches the property list from the Redux store and maps it to the FindHomeCard component.
 */
import { AppDispatch, RootState } from '@/redux/slices';
import getPropertyList from '@/redux/thunks/Property/property.thunk';
import { FindAHomeContent } from '@/src/types/StaticContent/findahome.content.type';
import Routes from '@/src/utils/RouteConstants';
import { PropertyCard } from 'blankbase-packages';
import { useRouter } from 'next/navigation';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';


const PropertyDetailsList = ({ latitude, longitude, FindAHomeContent, PropertyDetails }: { PropertyDetails: any, latitude: any, longitude: any, FindAHomeContent: FindAHomeContent['FindAHomeCard'] }) => {

    const router = useRouter();
    // Initialize the dispatch function
    const dispatch = useDispatch<AppDispatch>();
    const { propertyList, isLoading } = useSelector((state: RootState) => state.property);

    // Fetch the property list
    useEffect(() => {
        dispatch(getPropertyList({
            page: 1,
            perPage: 2,
            latitude: latitude?.toString() || '',
            longitude: longitude?.toString() || '',
            propertyId: [
                PropertyDetails?.data?.propertyId
            ]
        }));
    }, []);

    /**
     * Handles the click event on a property card.
     * @param {any} item The property object.
     */
    const onCardClick = (item: any) => {
        router.push(`${Routes.FIND_A_HOME_INFO(item?.slug)}`);
    };

    return (
        <div className={`grid grid-cols-1 lg:grid-cols-2 gap-5`}>
            {propertyList && propertyList?.data?.slice(0, 2)?.map((item: any, cardKey: number) => {
                return (
                    <React.Fragment key={cardKey}>
                        <PropertyCard
                            item={item}
                            isHostCard={false}
                            propertyImages={[item?.workspaceImage, ...(item?.propertyImage || [])]}
                            onCardClick={onCardClick}
                        />
                    </React.Fragment>
                )
            }
            )}
        </div>
    )
}

export default PropertyDetailsList