import React from 'react';
import { Outlet, useLocation } 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();
    const { pathname } = useLocation();
    const isImmersiveRoute = pathname.startsWith('/saju');

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

export default App;