'use client';
import { Suspense } from 'react';
import { usePathname } from 'next/navigation';
import { Nav, Tabbar, Footer } from './Nav';
import { routeNameFromPath, PUBLIC_CHROME } from '@/lib/router';

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const routeName = routeNameFromPath(pathname);
  const showChrome = PUBLIC_CHROME.includes(routeName);
  // Keep the bottom tab bar on the account / pro areas too (it's hidden on desktop via CSS).
  const showTabbar = showChrome || routeName === 'compte' || routeName === 'pro';

  return (
    <div className="dk">
      {showChrome && <Nav />}
      {children}
      {showChrome && <Footer />}
      {showTabbar && (
        <Suspense fallback={null}>
          <Tabbar />
        </Suspense>
      )}
    </div>
  );
}