'use client';

import { createContext, useContext, useState } from 'react';

/**
 * Open/closed state of the phone-width navigation drawer, shared between the
 * Header (which has the menu button) and the Sidebar (which is the drawer).
 * At md and up the sidebar is always visible and this state is unused.
 */
const MobileNavContext = createContext<{ open: boolean; setOpen: (open: boolean) => void }>({
  open: false,
  setOpen: () => {},
});

export function MobileNavProvider({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return <MobileNavContext.Provider value={{ open, setOpen }}>{children}</MobileNavContext.Provider>;
}

export const useMobileNav = () => useContext(MobileNavContext);