import {
  SwipeBarProvider,
  SwipeBarLeft,
  useSwipeBarContext,
} from "@luciodale/swipe-bar";

function App() {
  return (
    <SwipeBarProvider swipeBarZIndex={60} overlayZIndex={55}>
      <Content />
    </SwipeBarProvider>
  );
}

function Content() {
  const { openSidebar, closeSidebar, leftSidebars } = useSwipeBarContext();

  return (
    <>
      <main>
        <button onClick={() => openSidebar("left")}>Open Nav</button>
        <button onClick={() => openSidebar("left", { id: "settings" })}>
          Open Settings
        </button>
      </main>

      {/* Primary: default swipe-to-open behavior */}
      <SwipeBarLeft isAbsolute>
        <nav>Navigation content</nav>
      </SwipeBarLeft>

      {/* Secondary: programmatic only, stacks on top */}
      <SwipeBarLeft
        id="settings"
        swipeToOpen={false}
        showToggle={false}
        swipeBarZIndex={70}
        overlayZIndex={65}
        isAbsolute
      >
        <div>
          <button onClick={() => closeSidebar("left", { id: "settings" })}>
            Close
          </button>
          Settings content
        </div>
      </SwipeBarLeft>
    </>
  );
}