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

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

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

  let dailyVerse = $derived(data.dailyVerse);
  let greekVerseText = $derived(data.greekVerseText ?? "");
  let reference = $derived(data.reference ?? "");
</script>

<svelte:head>
  <title>Greek/English 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">
      Greek/English Parallel Random Verse
    </h1>

    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
      <h2 class="text-xl font-semibold text-gray-700 mb-4">
        Greek Verse (Modern 1904)
      </h2>
      <div class="space-y-2 text-gray-600 text-lg leading-relaxed">
        <p><strong>Reference:</strong> {reference}</p>
        <p><strong>Greek:</strong> {greekVerseText}</p>
      </div>
    </div>

    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
      <h2 class="text-xl font-semibold text-gray-700 mb-4">
        English Equivalent (NKJV)
      </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>
