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';

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>
        <Routes>
          <Route path="/" element={<AppContent />} />
          <Route path="/" element={<ApartmentRentals />} />
          <Route path="/booking" element={<BookingPage />} />
          <Route path="/myrentals" element={<MyRentals />} />
        </Routes>
      </AuthProvider>
    </Router>
  );
}

export default App;