const { useState } = React

const App = () => {
  const [isDark, setIsDark] = useState(false)
  return <Page isDark={isDark} setIsDark={setIsDark} />
}


  

function Page({isDark, setIsDark}) {
  return (
    <div>
      <Header isDark={isDark}/>
      <Content isDark={isDark} />
      <Footer isDark={isDark} setIsDark={setIsDark}/>
    </div>
  )
}


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

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

function Footer({isDark, setIsDark}) {
  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"))