import { createContext, useState, useEffect } from 'react';
import { getConfig } from '../api/config';

export const ConfigContext = createContext({
  config: null,
  loading: true,
});

export const ConfigProvider = ({ children }) => {
  const [config, setConfig] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchConfig = async () => {
      try {
        const data = await getConfig();
        setConfig(data);
      } catch (error) {
        console.error('Failed to fetch config:', error);
        // Set default fallback values
        setConfig({
          maxFileSizeMB: 20,
          maxImageDimension: 800,
          imageQuality: 85
        });
      } finally {
        setLoading(false);
      }
    };

    fetchConfig();
  }, []);

  const value = {
    config,
    loading
  };

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