"use client";

import { MainNav } from "@/components/main-nav";
import { Footer } from "@/components/footer";
import { AuthCheck } from "@/components/auth/auth-check";
import { Toaster } from "@/components/ui/toaster";
import { useBackgroundImage } from "@/components/background-switcher";

interface LayoutWrapperProps {
  children: React.ReactNode;
  isSignInPage: boolean;
  isAuthenticated: boolean;
}

export function LayoutWrapper({
  children,
  isSignInPage,
  isAuthenticated,
}: LayoutWrapperProps) {
  const { currentBackground, changeBackground } = useBackgroundImage();

  if (isSignInPage) {
    return <>{children}</>;
  }

  return (
    <AuthCheck>
      <div className="min-h-screen bg-black">
        <nav className="h-20 bg-black/20 px-4">
          {!isSignInPage && isAuthenticated && <MainNav />}
        </nav>
        <main className="h-[calc(100vh-5rem)]">
          <div 
            style={
              {
                backgroundImage: `url('${currentBackground}')`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundAttachment: 'fixed',
                cursor: 'pointer',
                transition: 'background-image 0.5s ease-in-out'
              }
            }
            onClick={!isSignInPage ? changeBackground : undefined}
          >
            {children}
          </div>
        </main>
      </div>
      {!isSignInPage && isAuthenticated && <Footer />}
      <Toaster />
    </AuthCheck>
  );
}