"use client";

import React, {
  createContext,
  useContext,
  useState,
  useCallback,
  type ReactNode,
  type Dispatch,
  type SetStateAction,
} from "react";

// Define a flexible shape for wizard state
interface WizardState {
  [key: string]: any;
}

interface WizardContextValue {
  state: WizardState;
  setState: Dispatch<SetStateAction<WizardState>>;
  updateState: (key: string, value: any) => void;
}

// Create the context
const WizardContext = createContext<WizardContextValue | undefined>(undefined);

// Provider component
export function WizardProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<WizardState>({});


  const updateState = useCallback((key: string, value: any) => {
    setState((prev) => ({ ...prev, [key]: value }));
  }, []);

  return (
    <WizardContext.Provider value={{ state, setState, updateState }}>
      {children}
    </WizardContext.Provider>
  );
}

// Hook to consume the context
export function useWizardContext(): WizardContextValue {
  const context = useContext(WizardContext);
  if (!context) {
    throw new Error("useWizardContext must be used within a WizardProvider");
  }
  return context;
}