<script lang="ts">
  import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed

  let { data, isWon }: { data: PageData; isWon: boolean } = $props();
  let dailyVerse = $derived(data.dailyVerse);
  let displayReference = $derived(
    dailyVerse.reference.replace(/^Psalms /, "Psalm ")
  );
  let displayVerseText = $derived(
    dailyVerse.verseText.replace(/^([a-z])/, (c) => c.toUpperCase())
  );
</script>

<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
  <blockquote
    class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
  >
    {displayVerseText}
  </blockquote>
  {#if isWon}
    <p class="text-center text-lg! big-text text-green-600! font-bold mt-8">
      {displayReference}
    </p>
  {/if}
</div>
