import React, { createContext, useContext, ReactNode } from 'react';
import { useResponsive, type UseResponsiveReturn } from '../hooks/useResponsive';

interface ResponsiveContextType extends UseResponsiveReturn {}

const ResponsiveContext = createContext<ResponsiveContextType | undefined>(undefined);

interface ResponsiveProviderProps {
  children: ReactNode;
}

/**
 * Responsive Context Provider
 * Provides responsive state to all child components
 * 
 * @example
 * ```tsx
 * // In App.tsx or main layout
 * <ResponsiveProvider>
 *   <App />
 * </ResponsiveProvider>
 * 
 * // In any component
 * const { isMobile, width } = useResponsiveContext();
 * ```
 */
export const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({ children }) => {
  const responsive = useResponsive();

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

/**
 * Hook to access responsive context
 * Must be used within ResponsiveProvider
 * 
 * @throws Error if used outside ResponsiveProvider
 */
// eslint-disable-next-line react-refresh/only-export-components
export const useResponsiveContext = (): ResponsiveContextType => {
  const context = useContext(ResponsiveContext);
  
  if (context === undefined) {
    throw new Error('useResponsiveContext must be used within a ResponsiveProvider');
  }
  
  return context;
};

