import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { AppShell } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import Header from './components/Header';
import Navigation from './components/Navigation';
import HomePage from './pages/HomePage';
import AppLoader from './components/AppLoader';

function App() {
  const [collapsed, { toggle: toggleNavbar }] = useDisclosure(false);

  return (
    <AppShell
      header={{ height: 60 }}
      navbar={{ 
        width: 300, 
        breakpoint: 'sm',
        collapsed: { mobile: collapsed, desktop: collapsed }
      }}
      padding="md"
    >
      <AppShell.Header>
        <Header onToggleNavbar={toggleNavbar} />
      </AppShell.Header>
      <AppShell.Navbar>
        <Navigation />
      </AppShell.Navbar>
      <AppShell.Main>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/app/:appName/*" element={<AppLoader />} />
        </Routes>
      </AppShell.Main>
    </AppShell>
  );
}

export default App;