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

const CustomFieldsContext = createContext({ customFields: [] });

export const CustomFieldsProvider = ({ children, customFields: initialCustomFields = [] }) => {
  const [customFields, setCustomFields] = useState(initialCustomFields || []);

  useEffect(() => {
    setCustomFields(Array.isArray(initialCustomFields) ? initialCustomFields : []);
  }, [initialCustomFields]);

  return (
    <CustomFieldsContext.Provider value={{ customFields }}>
      {children}
    </CustomFieldsContext.Provider>
  );
};

export const useCustomFields = () => useContext(CustomFieldsContext);