// context/HeaderContext.tsx
"use client";

import React, { createContext, useContext, useState, ReactNode, useCallback } from 'react';

interface HeaderConfig {
  showBackButton: boolean;
  // Add other configurable items here, e.g., title, custom elements
}

interface HeaderContextType {
  config: HeaderConfig;
  setHeaderConfig: (newConfig: Partial<HeaderConfig>) => void;
}

const defaultHeaderConfig: HeaderConfig = {
  showBackButton: false,
};

const HeaderContext = createContext<HeaderContextType | undefined>(undefined);

export const HeaderProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [config, setConfig] = useState<HeaderConfig>(defaultHeaderConfig);

  const setHeaderConfig = useCallback((newConfig: Partial<HeaderConfig>) => {
    setConfig(prevConfig => ({ ...prevConfig, ...newConfig }));
  }, []);

  return (
    <HeaderContext.Provider value={{ config, setHeaderConfig }}>
      {children}
    </HeaderContext.Provider>
  );
};

export const useHeader = () => {
  const context = useContext(HeaderContext);
  if (context === undefined) {
    throw new Error('useHeader must be used within a HeaderProvider');
  }
  return context;
};