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



const PropertyView = () => {
  const { id } = useParams(); // Extract the property ID from the route
  const dispatch = useDispatch();
  const { selectedProperty, status, error } = useSelector((state) => state.property);

  useEffect(() => {
    // Fetch the property by ID when the component loads
    if (id) {
      dispatch(fetchPropertyById(id));
    }
  }, [id, dispatch]);

  if (status === "loading") {
    return <p>Loading property details...</p>;
  }

  if (status === "failed") {
    return <p>Error loading property: {error}</p>;
  }

//   console.log("selectedProperty", selectedProperty);

  return (
    <>

      <div className="container property-view">
        {selectedProperty ? (
          <div className="property-details">
            <h1>{selectedProperty.title}</h1>

            <p>Email: {selectedProperty.useremail}</p>
            {/* Add more property details as needed */}
          </div>
        ) : (
          <p>Property not found.</p>
        )}
      </div>

    </>
  );
};

export default PropertyView;