"use client";

/**
 * The column that holds the header, page and footer.
 *
 * Exists as a client component for one reason: the bottom padding that
 * reserves space for the mobile tab bar has to disappear wherever the tab bar
 * does, and that decision depends on the route. Left in the server layout, the
 * padding would survive the bar and leave a 64px gap under a chat composer.
 */

import { cn } from "@/lib/utils";
import { useHidesAppChrome } from "@/lib/use-chrome-visibility";

export function AppShell({ children }: { children: React.ReactNode }) {
  const noTabBar = useHidesAppChrome();

  return (
    <div
      className={cn(
        "flex flex-1 flex-col md:pl-16",
        // Matches SiteBottomNav's own visibility exactly.
        noTabBar ? "pb-0" : "pb-16 md:pb-0",
      )}
    >
      {children}
    </div>
  );
}