import React from 'react';

type ResponsiveQueryContextType = {
  disableCSSMediaQueries?: boolean;
};

export const ResponsiveQueryContext =
  React.createContext<ResponsiveQueryContextType>({
    disableCSSMediaQueries: false,
  });

export const ResponsiveQueryProvider = (
  props: ResponsiveQueryContextType & { children: React.ReactNode }
) => {
  const value = React.useMemo(
    () => ({
      disableCSSMediaQueries: props.disableCSSMediaQueries,
    }),
    [props.disableCSSMediaQueries]
  );

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