Refactored the header

src/context/HeaderContext.tsx

@@ -0,0 +1,42 @@
+// 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;
+};