import { Outlet } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import { useAuth } from '../../contexts/AuthContext'; // Import useAuth

console.log('Layout.jsx: Rendering Layout component'); // Add logging

const Layout = () => {
  const { loading, isInitialized } = useAuth();

  if (!isInitialized || loading) {
    return (
      <div className="min-h-screen bg-campfire-dark flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
      </div>
    );
  }

  console.log('Layout.jsx: Auth initialized, rendering Header, Outlet, and Footer.'); // Add logging
  return (
    <div className="min-h-screen bg-campfire-dark flex flex-col">
      <Header />
      <main className="flex-grow">
        <Outlet />
      </main>
      <Footer />
    </div>
  );
};

export default Layout;
