import { useState, useEffect } from "react";
import Sidebar from "./Sidebar";
import "./index.css";
// import ResumeInfoModal from "@/pages/CompanyJobsPage/components/ResumeInfoModal";

const Layout = ({ children }) => {
  const [isCollapsed, setIsCollapsed] = useState(() => {
    const saved = localStorage.getItem("sidebar-collapsed");
    return saved === "true";
  });

  useEffect(() => {
    const handleStorageChange = () => {
      const saved = localStorage.getItem("sidebar-collapsed");
      setIsCollapsed(saved === "true");
    };

    window.addEventListener("storage", handleStorageChange);

    // 监听自定义事件
    const handleSidebarToggle = (event) => {
      setIsCollapsed(event.detail.isCollapsed);
    };

    window.addEventListener("sidebarToggle", handleSidebarToggle);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
      window.removeEventListener("sidebarToggle", handleSidebarToggle);
    };
  }, []);

  return (
    <div className="app-layout">
      <Sidebar />
      <main
        className={`main-content ${isCollapsed ? "sidebar-collapsed" : ""}`}
      >
        {children}
      </main>
      {/* <ResumeInfoModal visible={true} /> */}
    </div>
  );
};

export default Layout;