import React, { useState } from 'react';
import Sidebar, { MobileMenuButton } from './Sidebar';

export default function ResponsiveSidebar({ children }) {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const toggleMobileMenu = () => setIsMobileMenuOpen(prev => !prev);
  const closeMobileMenu = () => setIsMobileMenuOpen(false);

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <Sidebar 
        isMobileOpen={isMobileMenuOpen} 
        onMobileClose={closeMobileMenu} 
      />
      
      {/* Contenido principal */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Header móvil - siempre visible en móviles */}
        <header className="lg:hidden bg-white shadow-sm border-b border-gray-200 px-4 py-3 flex items-center justify-between sticky top-0 z-20">
          <MobileMenuButton onClick={toggleMobileMenu} />
          <h1 className="text-lg font-semibold text-gray-900">EFC Dashboard</h1>
          <div className="w-8"></div> {/* Spacer para centrar el título */}
        </header>
        
        {/* Contenido */}
        <main className="flex-1 overflow-y-auto p-4 lg:p-6">
          {children}
        </main>
      </div>
    </div>
  );
}
