const { useState, createContext, useContext } = React

const ThemeContext = createContext(null)

const App = () => {
  const [isDark, setIsDark] = useState(false)
  return (
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <Page />
    </ThemeContext.Provider>
  );
}
  

function Page() {
  return (
    <div className="page">
      <Header />
      <Content />
      <Footer />
    </div>
  )
}


function Header() {
  const { isDark } = useContext(ThemeContext)
  console.log(isDark)
  return (
    <header
      className="header" style={{ backgroundColor: isDark ? "black" : "lightgray", color: isDark ? "white" : "black" }}>
      <h1>Welcome 곽튜브</h1>
    </header>
  )
}

function Content() {
  const { isDark } = useContext(ThemeContext)
  
  return (
    <div className="content" style={{ backgroundColor: isDark ? "black" : "white", color: isDark ? "white" : "black", }} >
      <p>곽튜브님, 좋은 여행 되세요.</p>
    </div>
  )
}

function Footer() {
  const { isDark, setIsDark } = useContext(ThemeContext)
    
  const toggleTheme = () => {
    setIsDark(!isDark)
  }
  return (
    <footer className="footer" style={{ backgroundColor: isDark ? "black" : "lightgray" }} >
      <button className="button" onClick={toggleTheme}>
        Dark Mode
      </button>
    </footer>
  )
}


ReactDOM.render(<App />,
document.getElementById("root"))