import React, { useState, useEffect } from 'react';
                        import { fetchProperties } from '../services/api';
                        import PropertyCard from './PropertyCard';
                        import SearchBar from './SearchBar';
                        import '../styles/Marketplace.css';
                        
                        
                        const Marketplace = () => {
                          const [properties, setProperties] = useState([]);
                          const [loading, setLoading] = useState(true);
                          const [filters, setFilters] = useState({
                            type: '',
                            priceRange: '',
                            location: ''
                          });
                        
                          useEffect(() => {
                            const loadProperties = async () => {
                              try {
                                const data = await fetchProperties(filters);
                                setProperties(data);
                                setLoading(false);
                              } catch (error) {
                                console.error('Error loading properties:', error);
                              }
                            };