import { useState, useEffect }  from "react";

function Home() {
  const [quote, setQuote] = useState("");
  const [author, setAuthor] = useState("");

  const getQuote = async () => {
    try {
      const response = await fetch("https://api.realinspire.live/v1/quotes/random");
      const json = await response.json();
      const quote = await json.map(quote => quote.content);
      const author = await json.map(author => author.author);
      setQuote(quote);
      setAuthor(author);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    getQuote();
  }, []);

  return (
    <div style={{ textAlign: "center" }}>
      <img className="tanh fadeSlideIn" alt="There Are No Hills"></img>
      <div className="content fadeSlideIn">
        <blockquote>
          <p>
            {quote}
          </p>
          <cite>
            {author}
          </cite>
        </blockquote> 
      </div>
      <div className="socials fadeSlideIn">
        <a href="https://www.instagram.com/there.are.no.hills" target="_blank"><img className="social-icon instagram" alt="Instagram" /></a>
        <a href="https://www.tiktok.com/@there.are.no.hills" target="_blank>"><img className="social-icon tiktok" alt="TikTok" /></a>
        <a href="https://open.spotify.com/artist/4X6aBpcY6Ol0p07sxNHgwG" target="_blank"><img className="social-icon spotify" alt="Spotify" /></a>
        <a href="https://soundcloud.com/terrano-hills" target="_blank"><img className="social-icon soundcloud" alt="SoundCloud" /></a>
        <a href="https://music.apple.com/de/artist/there-are-no-hills/1482447081" target="_blank"><img className="social-icon applemusic" alt="Apple Music" /></a>
        <a href="https://www.youtube.com/@therearenohills3171" target="_blank"><img className="social-icon youtube" alt="YouTube" /></a>
      </div>
    </div>
  );
}
export default Home