import { useState } from "react"
import { BrowserRouter, Routes, Route } from "react-router-dom"

import HomePage from "./pages/HomePage"
import DealPage from "./pages/DealDetailsPage"


import CreateDealPage from "./pages/CreateDealPage"
import AccountSettingsPage from "./pages/AccountSettingsPage"
import ProfilePage from "./pages/ProfilePage"
import SearchPage from "./pages/SearchPage"

import LoginModal from "./components/Auth/LoginModal"

export default function App() {
  const [showLoginModal, setShowLoginModal] = useState(false)

  return (
    <BrowserRouter>
      {showLoginModal && (
        <LoginModal
          onClose={() => setShowLoginModal(false)}
        />
      )}

      <Routes>
        <Route path="/" element={<HomePage onRequireLogin={() => setShowLoginModal(true)} />} />
     
        <Route
        path="/deal/:id"
        element={<DealPage onRequireLogin={() => setShowLoginModal(true)} />}
      />
        <Route
          path="/search"
          element={<SearchPage onRequireLogin={() => setShowLoginModal(true)} />}
        />


        <Route path="/create-deal" element={<CreateDealPage />} />
        <Route path="/account" element={<AccountSettingsPage />} />
        <Route path="/user/:userName" element={<ProfilePage />} />

      </Routes>
    </BrowserRouter>
  )
}
