import { useState } from 'react';
import GlassDrawer from '../components/GlassDrawer';
import GlassDock from '../components/GlassDock';

export default function MainLayout({ children }) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="min-h-screen relative overflow-hidden">
      
      {/* 1. MENU BUTTON: Pinned Top-Left (Outside everything) */}
      <div className="fixed top-6 left-6 z-50">
        <button 
          onClick={() => setIsMenuOpen(true)}
          className="active:scale-90 transition-transform"
        >
          {/* Sized correctly (w-12) so it's not giant */}
          <img 
            src="/assets/menu_button.png" 
            alt="Menu" 
            className="w-12 h-auto drop-shadow-md" 
          />
        </button>
      </div>

      <GlassDrawer isOpen={isMenuOpen} setIsOpen={setIsMenuOpen} />
      
      {/* 2. MAIN CONTENT (The Feed) */}
      <main className="relative z-0 w-full h-screen">
        {children}
      </main>

      {/* 3. DOCK (Bottom Icons) */}
      <GlassDock />
    </div>
  );
}