import { createContext, useContext, useState, type ReactNode } from "react";

type ViewMode = "vp" | "dev";

const ViewModeContext = createContext<{
  mode: ViewMode;
  setMode: (m: ViewMode) => void;
}>({ mode: "vp", setMode: () => {} });

export function ViewModeProvider({ children }: { children: ReactNode }) {
  const [mode, setMode] = useState<ViewMode>(
    () => (localStorage.getItem("viewMode") as ViewMode) || "vp"
  );
  const set = (m: ViewMode) => {
    setMode(m);
    localStorage.setItem("viewMode", m);
  };
  return (
    <ViewModeContext.Provider value={{ mode, setMode: set }}>
      {children}
    </ViewModeContext.Provider>
  );
}

export const useViewMode = () => useContext(ViewModeContext);
