import React, { useState } from "react";
import logo from "./heart-icon.png";
import "./App.css";

function MakePoem() {
  return (
    <div className="App Poem-statement">
      <div className="pure-g">
        <div className="pure-u-1-5" />
        <p className="pure-u-3-5">
          <code>
            You are important. I wrote a small poem I hope will help you today.<br></br>
            It's not very long, but I'm doing my best, and so are you.
          </code>
        </p>
      </div>
      <div className="pure-g">
        <div className="pure-u-1-5" />
        <p className="pure-u-3-5">
          <code>
            You are the moon, you are the stars<br></br>
            I'm glad you're here, whomever you are.
          </code>
        </p>
      </div>
      <div className="pure-g">
        <div className="pure-u-1-5" />
        <p className="pure-u-3-5">
          <code>
            We've been through much; in this life it's true,<br></br>
            But in the end, you will come through.
          </code>
        </p>
        <div className="pure-u-1-5" />
      </div>
      <div className="pure-g">
        <div className="pure-u-1-5" />
        <p className="pure-u-3-5">
          <code>
            Much like life, this poem is short<br></br>
            It doesn't always rhyme, or have a nice beat;<br></br>
            It might seem wrong, or incomplete;<br></br>
            It might go on, or so it seems;<br></br>
            It might feel like you're in a dream.
          </code>
        </p>
        <div className="pure-u-1-5" />
      </div>
      <div className="pure-g">
        <div className="pure-u-1-5" />
        <p className="pure-u-3-5">
          <code>
            That's not the point, I know in my heart<br></br>
            I'm glad you're here, whomever you are.
          </code>
        </p>
        <div className="pure-u-1-5" />
      </div>
    </div>
  );
}

function App() {
  let [isPoemShown, showPoem] = useState(false);
  let [buttonTextString, changeButtonText] = useState("Tell me more");
  const activatePoem = () => {
    showPoem(!isPoemShown);
    if (isPoemShown) {
      changeButtonText("Tell me more");
    } else {
      changeButtonText("Tell me less");
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo pure-img" alt="logo" />
        <p>
          <code className="App-statement">You are important and loved</code>
        </p>
        <button
          className="App-button pure-button"
          autoFocus
          name="Tell me more"
          onClick={() => activatePoem()}
        >
          {buttonTextString}
        </button>
        {isPoemShown && <MakePoem />}
      </header>
    </div>
  );
}

export default App;