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

export function Layout({ children, onMangaClick, onAddMangaClick }) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gray-50">
      <Header 
        onMenuClick={() => setIsSidebarOpen(!isSidebarOpen)} 
        onMangaClick={onMangaClick}
        onAddMangaClick={onAddMangaClick}
      />
      <Sidebar 
        isOpen={isSidebarOpen} 
        onClose={() => setIsSidebarOpen(false)}
        onAddMangaClick={onAddMangaClick}
      />
      
      <main className="pt-16 md:ml-60">
        {children}
      </main>
    </div>
  );
}