import React from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";

const quotes = [
  {
    text:
      "Genius is one percent inspiration and ninety-nine percent perspiration.",
    author: "Thomas Edison, type.fit"
  },
  {
    text: "You can observe a lot just by watching.",
    author: "Yogi Berra, type.fit"
  },
  {
    text: "A house divided against itself cannot stand.",
    author: "Abraham Lincoln, type.fit"
  },
  {
    text: "Difficulties increase the nearer we get to the goal.",
    author: "Johann Wolfgang von Goethe, type.fit"
  },
  {
    text: "Fate is in your hands and no one elses",
    author: "Byron Pulsifer, type.fit"
  },
  {
    text: "Be the chief but never the lord.",
    author: "Lao Tzu, type.fit"
  },
  {
    text: "Nothing happens unless first we dream.",
    author: "Carl Sandburg, type.fit"
  },
  {
    text: "Well begun is half done.",
    author: "Aristotle, type.fit"
  },
  {
    text: "Life is a learning experience, only if you learn.",
    author: "Yogi Berra"
  },
  {
    text: "Self-complacency is fatal to progress.",
    author: "Margaret Sangster, type.fit"
  },
  {
    text: "Peace comes from within. Do not seek it without.",
    author: "Buddha, type.fit"
  },
  {
    text: "What you give is what you get.",
    author: "Byron Pulsifer, type.fit"
  },
  {
    text: "We can only learn to love by loving.",
    author: "Iris Murdoch, type.fit"
  },
  {
    text: "Life is change. Growth is optional. Choose wisely.",
    author: "Karen Clark, type.fit"
  },
  {
    text: "You'll see it when you believe it.",
    author: "Wayne Dyer, type.fit"
  },
  {
    text: "Today is the tomorrow we worried about yesterday.",
    author: "type.fit"
  }
];

const QuoteBox = ({ quote, handleChangeQuote }) => (
  <div id="quote-box" className="py-3 px-4" style={{ width: "300px" }}>
    <figure>
      <blockquote className="blockquote" id="text">
        <p>{quote.text}</p>
      </blockquote>
      <figcaption className="blockquote-footer" id="author">
        {quote.author}
      </figcaption>
    </figure>
    <div className="d-flex justify-content-between align-items-center">
      <button
        type="button"
        className="btn btn-light py-1"
        id="new-quote"
        onClick={handleChangeQuote}
      >
        New Quote
      </button>
      <a
        className="btn btn-primary py-1"
        id="tweet-quote"
        href="twitter.com/intent/tweet"
      >
        Tweet
      </a>
    </div>
  </div>
);

const App = () => {
  const [quote, setQuote] = React.useState("");

  React.useEffect(() => {
    getRandomQuote();
  }, []);

  const getRandomQuote = () => {
    const index = Math.round(Math.random() * (quotes.length - 1));
    setQuote(quotes[index]);
  };

  return (
    <div className="min-vh-100 d-flex justify-content-center align-items-center text-white bg-dark">
      <QuoteBox quote={quote} handleChangeQuote={getRandomQuote} />
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#app"));