"use client"

import { useAuth } from "@/contexts/auth-context"
import Header from "@/components/navigation/header"
import { usePathname } from "next/navigation"

interface AppLayoutProps {
  children: React.ReactNode
}

export function AppLayout({ children }: AppLayoutProps) {
  const { isAuthenticated, isLoading } = useAuth()
  const pathname = usePathname()
  
  // Don't show header on auth pages
  const isAuthPage = pathname === "/auth" || pathname === "/signin" || pathname === "/signup"
  
  // Show loading state while checking auth
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-black">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-orange-500"></div>
      </div>
    )
  }
  
  // For auth pages, don't show header
  if (isAuthPage) {
    return <>{children}</>
  }
  
  // For authenticated users on other pages, show header
  if (isAuthenticated) {
    return (
      <>
        <Header />
        {children}
      </>
    )
  }
  
  // For unauthenticated users on non-auth pages, show header but redirect to auth
  return (
    <>
      <Header />
      {children}
    </>
  )
}