context.js

import { createContext, useContext, useState } from "react";

// Consumer
// useContext
const AppContext = createContext();
const ThemeContext = createContext();

export default function App() {
  const [language, setLanguage] = useState("en-US");
  const [color, setColor] = useState("blue");
  return (
    <AppContext.Provider value={{ color, language }}>
      {/* child component of app */}
      <MainSection lang={language} color={color} />
      <Footer lang={language} />
    </AppContext.Provider>
  );
}

function MainSection({ lang, color }) {
  return (
    <>
      I am the main section guy
      <p>lorem </p>
      <p>
        Language: <b>{lang}</b>{" "}
      </p>
      {/* child component of MainSection */}
      <Button color={color} language={lang} />
      <br />
    </>
  );
}

function Footer({ lang }) {
  return (
    <>
      I am the footer guy
      <p>lorem </p>
      {/* <p>{lang} </p> */}
    </>
  );
}

function Button() {
  const context = useContext(AppContext);

  return (
    <button style={{ backgroundColor: context.color }}>
      {/* child component of Button */}
      <Text language={context.language} />
    </button>
  );
}

// child component of button
// because the Text is not a direct child of App we can't access its state
// we can't access color
// we can't access the language
// render prop
function Text({ language }) {
  return (
    <AppContext.Consumer>
      {({ color }) => (
        <span style={{ backgroundColor: color }}>{language}</span>
      )}
    </AppContext.Consumer>
  );
}