"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();

  return (
    <AuthCheck>
      {!isSignInPage && isAuthenticated && <MainNav />}
      <div 
        className={isSignInPage ? "min-h-screen" : "min-h-screen"}
        style={
          isSignInPage 
            ? {} // No background style for signin page - let the page component handle it
            : {
                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}
      >
        <main>{children}</main>
      </div>
      {!isSignInPage && isAuthenticated && <Footer />}
      <Toaster />
    </AuthCheck>
  );
} 