import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchUserProperties } from "../redux/features/propertySlice";
import { NavLink } from "react-router-dom";


const UserProperties = () => {
    const dispatch = useDispatch();
    const { user } = useSelector((state) => ({ ...state.auth }));
    const { userProperties} = useSelector((state) => state.property);

        // Fetch user properties when "Active Properties" tab is selected
        useEffect(() => {
            
              dispatch(fetchUserProperties(user?.result?.userId));
            
          }, [dispatch, user?.result?.userId]);

  return (
    <>
         {userProperties.length > 0 ? (
          <ul>
            {userProperties.map((property) => (
              <li key={property._id}>
              <NavLink to={`/property/${property.propertyId}`} target="_blank">
              {property.title}
                                      {"....."}
                                    </NavLink>
             
              </li>

            

            ))}
          </ul>
        ) : (
          <p>No active properties found.</p>
        )}

    </>
  )
}

export default UserProperties