<script lang="ts">
    let { new_event, participants, subject, body } = $props();
</script>

<!-- New Event Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
  <h2 class="text-xl font-bold mb-2">Event Overview</h2>
  <ul class="space-y-1">
    <li><span class="font-semibold">Name:</span> {new_event.name}</li>
    <li><span class="font-semibold">Date:</span> {new_event.date}</li>
    <li><span class="font-semibold">Description:</span> {new_event.description}</li>
  </ul>
</div>

<!-- Email Overview -->
<div class="bg-white border border-gray-300 rounded p-6 mb-6">
  <h2 class="text-xl font-bold mb-2">Email Preview</h2>
  <div class="mb-2"><span class="font-semibold">Subject:</span> {subject}</div>
  <div class="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold">Body:</span>
    <div class="mt-1">{body}</div>
  </div>
</div>

<!-- Participants Overview -->
<div class="bg-white border border-gray-300 rounded p-6">
  <h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2>
  <ul class="space-y-1">
    {#each participants as p}
      <li class="flex items-center gap-2 border-b last:border-b-0 pb-1">
        <span class="font-semibold">{p.name} {p.surname}</span>
        <span class="font-mono text-xs text-gray-600">{p.email}</span>
      </li>
    {/each}
  </ul>
</div>