import { useState } from 'react'
import { Routes, Route } from 'react-router-dom'
import Sidebar from './components/Sidebar'
import TopBar from './components/TopBar'
import Glance from './pages/Glance'
import Infrastructure from './pages/Infrastructure'

function App() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const sidebarWidth = sidebarCollapsed ? 64 : 200

  return (
    <div className="min-h-screen w-screen overflow-hidden bg-page">
      <Sidebar
        collapsed={sidebarCollapsed}
        onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
      />

      <main
        className="h-screen overflow-hidden"
        style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
      >
        <TopBar />

        <section
          className="flex w-full flex-col overflow-hidden"
          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 24px 24px', gap: '20px' }}
        >
          <Routes>
            <Route path="/" element={<Glance />} />
            <Route path="/infrastructure" element={<Infrastructure />} />
          </Routes>
        </section>
      </main>
    </div>
  )
}

export default App