import { useState } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Sidebar from './components/Sidebar'
import Footer from './components/Footer'
import Home from './pages/Home'
import Spaces from './pages/Spaces'
import SpaceDetail from './pages/SpaceDetail'
import Impressum from './pages/Impressum'

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(true)

  return (
    <Router>
      <div className="flex flex-col h-screen bg-gradient-to-r from-slate-700 to-slate-900">
        <div className="flex flex-1 overflow-hidden">
          <Sidebar isOpen={sidebarOpen} setIsOpen={setSidebarOpen} />
          <main className="flex-1 overflow-y-auto flex flex-col bg-gradient-to-r from-slate-700 to-slate-900">
            <div className="flex-1">
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/spaces" element={<Spaces />} />
                <Route path="/spaces/:id" element={<SpaceDetail />} />
                <Route path="/impressum" element={<Impressum />} />
              </Routes>
            </div>
            <Footer />
          </main>
        </div>
      </div>
    </Router>
  )
}

export default App

