import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Outlet } from 'react-router-dom';

export default function AppLayout() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
  return (
    <div className="min-h-screen bg-neutral-50">
      {/* Header */}
      <header className="bg-white border-b border-neutral-200">
        <div className="page-container h-16 flex items-center justify-between">
          <div className="flex items-center gap-x-4">
            <button
              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
              className="lg:hidden p-2 rounded-lg hover:bg-neutral-100"
            >
              <MenuIcon className="w-6 h-6 text-neutral-500" />
            </button>
            <Logo className="h-8 w-auto" />
          </div>
          
          <nav className="hidden lg:flex items-center gap-x-8">
            {/* Navigation items */}
          </nav>
          
          <div className="flex items-center gap-x-4">
            {/* User menu, notifications, etc. */}
          </div>
        </div>
      </header>

      {/* Main content */}
      <main className="flex-1">
        <div className="page-container py-8">
          <Outlet />
        </div>
      </main>
      
      {/* Mobile sidebar */}
      <AnimatePresence>
        {isSidebarOpen && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 0.5 }}
              exit={{ opacity: 0 }}
              onClick={() => setIsSidebarOpen(false)}
              className="fixed inset-0 bg-black lg:hidden"
            />
            <motion.div
              initial={{ x: '-100%' }}
              animate={{ x: 0 }}
              exit={{ x: '-100%' }}
              className="fixed inset-y-0 left-0 w-64 bg-white border-r border-neutral-200 lg:hidden"
            >
              {/* Mobile navigation */}
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
} 