import { useLayout } from "./context";
import { SidebarHeader } from "./sidebar-header";
import { SidebarFooter } from "./sidebar-footer";
import { SidebarContent } from "./sidebar-content";

export function Sidebar() {
  const { isSidebarOpen } = useLayout();

  return (
    <aside className="fixed overflow-hidden bg-background rounded-xl top-2.5 bottom-2.5 start-2.5 z-20 transition-all duration-300 flex items-stretch shrink-0 w-(--sidebar-width) in-data-[sidebar-open=false]:w-(--sidebar-width-collapsed) border border-input">
      <div className="grow shrink-0 transition-all duration-300" style={{ width: isSidebarOpen ? 'var(--sidebar-width)' : 'var(--sidebar-width-collapsed)' }}>
        <SidebarHeader />
        <SidebarContent />
        <SidebarFooter />
      </div>
    </aside>
  );
}
