import * as React from 'react';

const PriorityContext = React.createContext('auto');
const Priorities = {
  Low: ({ children }) => <PriorityContext.Provider value='low'>{children}</PriorityContext.Provider>,
  High: ({ children }) => <PriorityContext.Provider value='high'>{children}</PriorityContext.Provider>,
  Auto: ({ children }) => <PriorityContext.Provider value='auto'>{children}</PriorityContext.Provider>,
};

const Page = () => (
  <>
    <Priorities.High>
      <Main />
    </Priorities.High>
    <Priorities.Low>
      <Sidebar />
    </Priorities.Low>
  </>
)

const Main = () => (
  <Block image='/images/hello.jpg' />
)

const Block = ({ image }) => {
  const importance = React.useContext(PriorityContext);
  return <img src={image} importance={importance} />
}

const Sidebar = () => null;