import React from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from './components/Navbar';
import BottomNav from './components/BottomNav';
import PageHeader from './components/PageHeader';
import Loading from './components/Loading';
import { useIsMobile } from './hooks/useIsMobile';
import './App.css';

function App() {
    const isMobile = useIsMobile();

    return (
        <div className="app-shell">
            <Navbar />
            <div className="app-content">
                <main className="site-main">
                    <PageHeader />
                    <React.Suspense fallback={<div className="suspend-loading"><Loading /></div>}>
                        <Outlet />
                    </React.Suspense>
                </main>
            </div>
            {isMobile && <BottomNav />}
        </div>
    );
}

export default App;