import './App.css';

const sqlCards = [{ "CardImg":"https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/91/43/40/9143401d-5824-5d0a-e559-4872b27602b9/source/256x256bb.jpg", "CardName": "Devouring Dragon", "ManaCost": 5, "Power": 5, "Toughness": 5, "CardDesc": "He does to people what Greg does to booty.", "CreatureType": "Dragon" },
{ "CardImg":"https://spellbook.blob.core.windows.net/hodassets/defaultportraits/fighter_default_cultist_female_0_2.jpg", "CardName": "Dragon Worshipper", "ManaCost": 1, "Power": 1, "Toughness": 1, "CardDesc": "He spends his days praying to dragons.", "CreatureType": "Human" },
{ "CardImg":"https://a.wattpad.com/useravatar/Angoleth.256.592295.jpg", "CardName": "Dragon Whelp", "ManaCost": 2, "Power": 3, "Toughness": 2, "CardDesc": "He will get there.", "CreatureType": "Dragon" }];

function Card(data) {
  return (
    <div class="card">
    <h4><b>{data.CardName}</b></h4>
      <img src={data.CardImg !== undefined ? data.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
      <div class="container">
        <p>{data.CardDesc}</p>
        <p style={{position: "absolute", bottom: -8, left: "2%"}}>Mana: {data.ManaCost}</p>
        <p style={{position: "absolute", bottom: -8, left: "35%"}}>Power: {data.Power} </p>
        <p style={{position: "absolute", bottom: -8, right: "2%"}}>Toughness: {data.Toughness}</p>
      </div>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <ul>
        {sqlCards.map((data, i) => (
          <li key={i}>
            <Card {...data}/>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;