import { Outlet } from "react-router-dom";
import { useChatContext } from "../../context/ChatContext";
import { Sidebar } from "./Sidebar";
import layoutStyles from "./AppLayout.module.css";

export function ChatLayout() {
	const { sidebarOpen, toggleSidebar } = useChatContext();

	return (
		<div className={layoutStyles.app}>
			<Sidebar />
			<main className={layoutStyles.main}>
				<Outlet />
			</main>
			<div
				className={`${layoutStyles.overlay} ${sidebarOpen ? layoutStyles.overlayOpen : ""}`}
				onClick={toggleSidebar}
				role="presentation"
			/>
		</div>
	);
}
