"use client"

import { TopNav } from "@/components/layout/top-nav"
import { BottomNav } from "@/components/layout/bottom-nav"
import { usePathname } from "next/navigation"

export function PersistentAppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  
  // Only show header/nav on main app pages
  const isAppPage = pathname?.startsWith("/feed") || 
                    pathname?.startsWith("/leaders") || 
                    pathname?.startsWith("/messages") || 
                    pathname?.startsWith("/friendlies") || 
                    pathname?.startsWith("/alerts") || 
                    pathname?.startsWith("/profile") ||
                    pathname?.startsWith("/search")

  if (!isAppPage) {
    return <>{children}</>
  }

  return (
    <div className="flex min-h-screen bg-background">
      <div className="fixed inset-0 dark:bg-gradient-to-br dark:from-[#0a0e13] dark:via-[#151a26] dark:to-[#1a1f2e] -z-10" />
      <div className="flex-1 min-h-screen pb-0 md:pb-20 w-full">
        <TopNav />
        <div className="max-w-4xl mx-auto px-2 sm:px-4 relative">
          {children}
        </div>
        <BottomNav />
      </div>
    </div>
  )
}