<script lang="ts">
  import type { PageProps } from "./$types";

  import VerseDisplay from "$lib/components/VerseDisplay.svelte";

  let { data }: PageProps = $props();

  let dailyVerse = $derived(data.dailyVerse);
</script>

<svelte:head>
  <title>Random Verse - Bibdle</title>
</svelte:head>

<div class="min-h-screen bg-linear-to-br from-blue-50 to-indigo-100 py-12 px-4">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">
      Random Verse Debug
    </h1>

    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
      <h2 class="text-xl font-semibold text-gray-700 mb-4">Verse Details</h2>
      <div class="space-y-2 text-gray-600">
        <p><strong>Book ID:</strong> {dailyVerse.bookId}</p>
        <p><strong>Reference:</strong> {dailyVerse.reference}</p>
        <p><strong>Verse Text:</strong> {dailyVerse.verseText}</p>
      </div>
    </div>

    <VerseDisplay {data} isWon={true} />
  </div>
</div>
