"use client";
import { createContext, useCallback, useContext, useMemo, useState } from "react";

type Ctx = { open: boolean; toggle: () => void; close: () => void };

const C = createContext<Ctx | null>(null);

export function SettingsPanelProvider({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  const toggle = useCallback(() => setOpen((o) => !o), []);
  const close = useCallback(() => setOpen(false), []);
  const value = useMemo<Ctx>(() => ({ open, toggle, close }), [open, toggle, close]);
  return <C.Provider value={value}>{children}</C.Provider>;
}

export function useSettingsPanel() {
  const ctx = useContext(C);
  if (!ctx) throw new Error("useSettingsPanel must be used within SettingsPanelProvider");
  return ctx;
}