<script>
  export let question = "What is gradient descent?";
  export let answer =
    "Gradient descent is an algorithm used to minimize a loss function by taking small steps in the direction of steepest descent.";
  export let feedback = "Good: 👍";

  const emojiObj = {
    good: "Good 👍",
    bad: "Bad 👎",
    na: "No Rating",
    all: "All",
  };

  const colorObj = {
    good: "#00ebc7",
    bad: "#FF5470",
    na: "#fde24f",
    all: "#bfbfbf",
  };
</script>

<div class="qa-card">
  <div class="question">Q: {question}</div>
  <div class="answer">A: {answer}</div>
  <div class="feedback {feedback}">Rating: {emojiObj[feedback]}</div>
</div>

<style>
  .qa-card {
    border: 2px solid var(--black);
    display: flex;
    flex-direction: column;
    font-size: var(--smallText);
    padding: 4px;
    margin: 6px;
  }

  .qa-card:hover {
    border: 3px solid var(--black);
  }

  .question {
    background-color: var(--white);
    margin: 0;
    padding: 8px;
    border-bottom: 1px solid var(--black);
  }

  .answer {
    background-color: var(--lightGrey);
    margin: 0;
    padding: 8px;
    /* border-bottom: 1px solid var(--black); */
  }

  .feedback {
    margin: 0;
    padding: 8px;
  }

  .good {
    background-color: var(--green);
  }

  .bad {
    background-color: var(--red);
  }

  .na {
    background-color: var(--yellow);
  }
</style>
