<script lang="ts">
  export let riddle: string;
  export let answer: string;
  export let onComplete: () => void;
  export let hint: string | undefined = undefined;

  let userInput = '';

  const checkAnswer = () => {
    if (userInput.toLowerCase() === answer.toLowerCase()) {
      setTimeout(onComplete, 500);
    } else {
      setTimeout(() => (userInput = ''), 500);
    }
  };
</script>

<div class="container">
  <p class="big-text">{riddle}</p>

  <input bind:value={userInput} on:keyup={(e) => e.key === 'Enter' && checkAnswer()} />

  <button on:click={checkAnswer}>Submit</button>

  {#if hint}
    <br />

    <p class="opaque">Hint: {hint}</p>
  {/if}
</div>
