import { useState } from 'react'
import './App.css'
import InstancesTable from './components/InstanceTable.tsx'
import Settings from './components/Settings.tsx'

function App() {
  const [settingsOpen, setSettingsOpen] = useState(false)

  return (
    <>
      <section id='main'>
        <header>
          <h1>VSSM - Dashboard</h1>
          <button onClick={() => setSettingsOpen(true)}>⚙</button>
        </header>
        <div className='contentBox'>
          <InstancesTable />
        </div>
        {settingsOpen && <Settings onClose={() => setSettingsOpen(false)} />}
      </section>
    </>
  )
}

export default App
