import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import ApartmentRentals from './components/ApartmentRentals';
import ApartmentOptions from './components/ApartmentOptions';
import { AuthProvider, useAuth } from './components/AuthContext';
import BookingPage from './components/BookingPage';
import MyRentals from './components/MyRentals';
import Footer from './components/Footer';
import ApartmentList from './components/ApartmentList';
import { RentalProvider } from './components/RentalContext'; // Corrected import path

function AppContent() {
    const { isLoggedIn, logout, user } = useAuth();

    return (
        <div className='app'>
            <Header />
            {isLoggedIn ? (
                <>
                    <ApartmentRentals />
                    <ApartmentOptions />
                    <Footer />
                </>
            ) : (
                <>
                    <ApartmentRentals />
                    <ApartmentOptions />
                    <Footer />
                </>
            )}
        </div>
    );
}

function App() {
    return (
        <Router>
            <AuthProvider>
                <RentalProvider> {/* Added RentalProvider here */}
                    <Routes>
                        <Route path="/" element={<AppContent />} />
                        <Route path="/apartment-list" element={<ApartmentList />} />
                        <Route path="/booking/:apartmentId" element={<BookingPage />} />
                        <Route path="/myrentals" element={<MyRentals />} />
                    </Routes>
                </RentalProvider> {/* RentalProvider wraps Routes */}
            </AuthProvider>
        </Router>
    );
}

export default App;