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

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

<Container class="w-full p-8 sm:p-12 bg-white/70">
  <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 bg-white/70 rounded-xl px-4 py-2"
    >
      {displayReference}
    </p>
  {/if}
</Container>
