// src/components/Layout/Layout.js
import React, { useState } from "react";
import Sidebar from "./Sidebar";
import Header from "./Header";

const Layout = ({ children }) => {
  const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth > 768);

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <Sidebar isOpen={sidebarOpen} toggleSidebar={toggleSidebar} />
      
      <div className={`transition-all duration-300 ${sidebarOpen ? "md:mr-64" : "md:mr-20"}`}>
        {/* <Header toggleSidebar={toggleSidebar} /> */}
        <main className="p-6">
          {children}
        </main>
      </div>
    </div>
  );
};

export default Layout;