import SidebarHeader from "./SidebarHeader";
import useSidebarVisibility from "./useSidebarVisibility";
import "./Sidebar.css";

function Sidebar() {
  const { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText } =
    useSidebarVisibility();

  return (
    <div className={`sidebar sidebar-${sidebarVisibility}`}>
      <SidebarHeader sidebarVisibility={sidebarVisibility} />
      <div className="sidebar-footer">
        <button onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
      </div>
    </div>
  );
}

export default Sidebar;