import { Outlet } from 'react-router-dom';

import { BottomTabBar } from './BottomTabBar';
import { NavRail } from './NavRail';

/**
 * Top-level chrome: persistent icon rail (>=640px) or bottom tab bar (<640px), wrapping whichever
 * feature section is active. Each feature section owns its own list/main/detail responsive split
 * internally (see e.g. features/messages) -- this shell only decides "rail vs tabs", nothing about
 * columns within a section.
 */
export function AppShell() {
  return (
    <div className="flex h-dvh w-full overflow-hidden bg-surface-page">
      <div className="hidden sm:flex sm:h-full">
        <NavRail />
      </div>
      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
        <div className="min-h-0 flex-1 overflow-hidden">
          <Outlet />
        </div>
        <div className="sm:hidden">
          <BottomTabBar />
        </div>
      </div>
    </div>
  );
}