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

function App() {
  return (
    <SwipeBarProvider>
      <Panels />
    </SwipeBarProvider>
  );
}

function Panels() {
  const { openSidebar, closeSidebar, bottomSidebars } = useSwipeBarContext();

  return (
    <>
      <main>
        <button onClick={() => openSidebar("bottom")}>Primary</button>
        <button onClick={() => openSidebar("bottom", { id: "secondary" })}>
          Secondary
        </button>
      </main>

      {/* Primary: default behavior */}
      <SwipeBarBottom sidebarHeightPx={400} isAbsolute>
        <div>
          <button onClick={() => openSidebar("bottom", { id: "secondary" })}>
            Open Secondary
          </button>
        </div>
      </SwipeBarBottom>

      {/* Secondary: programmatic only, stacks on top */}
      <SwipeBarBottom
        id="secondary"
        sidebarHeightPx={300}
        isAbsolute
        swipeToOpen={false}
        showToggle={false}
        swipeBarZIndex={35}
        overlayZIndex={25}
      >
        <div>
          <button onClick={() => closeSidebar("bottom", { id: "secondary" })}>
            Close
          </button>
        </div>
      </SwipeBarBottom>
    </>
  );
}