import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Home from './pages/Home';
import Search from './pages/Search';
import Login from './pages/Login';
import Register from './pages/Register';
import PhotographerDetail from './pages/PhotographerDetail';
import Dashboard from './pages/Dashboard';

import { AuthProvider } from './context/AuthContext';
import { SocketProvider } from './context/SocketContext';
import Chat from './pages/Chat';
import ExploreMap from './pages/ExploreMap';

function App() {
    return (
        <AuthProvider>
            <SocketProvider>
                <Router>
                    <div className="min-h-screen bg-gray-50">
                        <Header />
                        <main className="container mx-auto px-4 py-8">
                            <Routes>
                                <Route path="/" element={<Home />} />
                                <Route path="/search" element={<Search />} />
                                <Route path="/explore" element={<ExploreMap />} />
                                <Route path="/login" element={<Login />} />
                                <Route path="/register" element={<Register />} />
                                <Route path="/photographer/:id" element={<PhotographerDetail />} />
                                <Route path="/dashboard" element={<Dashboard />} />
                                <Route path="/chat/:id?" element={<Chat />} />
                            </Routes>
                        </main>
                    </div>
                </Router>
            </SocketProvider>
        </AuthProvider>
    );
}

export default App;